<template>
  <div class="page">
    <el-row style="height: 100%">
      <el-col :span="3" class="menu_box">
        <el-anchor
          :container="containerRef"
          direction="vertical"
          type="default"
          :offset="30"
          @click="handleClick"
          class="anchor"
          :marker="false"
        >
          <el-anchor-link href="#part1" title="基本信息" />
          <el-anchor-link href="#part2" title="体征" />
          <el-anchor-link href="#part3" title="生活方式" />
          <el-anchor-link href="#part4" title="总结" />
          <el-anchor-link href="#part5" title="用药情况" />
        </el-anchor>
      </el-col>
      <el-col :span="21" class="content_box">
        <div
          ref="containerRef"
          class="containerbox"
          style="height: 700px; overflow-y: auto; overflow-x: hidden"
        >
          <div
            id="part1"
            style="width: 100%; margin-top: 30px; box-sizing: border-box"
          >
            <!-- 基本信息 -->
            <h4 class="title" id="baseInfo">基本信息</h4>
            <el-form
              ref="ruleForm1"
              :model="ruleForm"
              :rules="rules"
              label-position="top"
              style="box-sizing: border-box; width: 98%"
            >
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="9">
                  <el-form-item label="姓名" prop="name" :ref="'nameIN'">
                    <!-- <el-input v-model="ruleForm.name"></el-input> -->
                    <el-autocomplete
                      ref="nameInput"
                      @keydown.enter.native="NextInput('phoneInput')"
                      v-model.lazy="ruleForm.name"
                      :fetch-suggestions="querySearchAsync"
                      placeholder="请输入姓名"
                      style="width: 100%"
                      @select="handleSelect"
                    >
                      <!-- @blur="handlerBlur" -->
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input
                      ref="phoneInput"
                      v-model="ruleForm.phoneNumber"
                      @keydown.enter.native="NextInput('cardNumberInput')"
                      placeholder="请输入联系电话"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="9">
                  <el-form-item prop="cardType" label="证件类型">
                    <el-select
                      v-model="ruleForm.cardType"
                      placeholder="请选择证件类型"
                      style="width: 100%"
                      ref="codeTypeInput"
                    >
                      <el-option
                        label="居民身份证"
                        value="居民身份证"
                      ></el-option>
                      <el-option
                        label="港澳台居民身份证"
                        value="港澳台居民身份证"
                      ></el-option>
                      <el-option
                        label="外国人永久居留身份证"
                        value="外国人永久居留身份证"
                      ></el-option>
                      <el-option
                        label="港澳台居民居住证"
                        value="港澳台居民居住证"
                      ></el-option>
                      <el-option
                        label="居民户口本"
                        value="居民户口本"
                      ></el-option>
                      <el-option label="护照" value="护照"></el-option>
                      <el-option label="军官证" value="军官证"></el-option>
                      <el-option
                        label="文职干部证"
                        value="文职干部证"
                      ></el-option>
                      <el-option label="士兵证" value="士兵证"></el-option>
                      <el-option label="驾驶执照" value="驾驶执照"></el-option>
                      <el-option label="出生证" value="出生证"></el-option>
                      <el-option label="其他" value="其他"></el-option>
                      <el-option label="儿保卡" value="儿保卡"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="证件号码" prop="cardNumber">
                    <!-- <el-input v-model="ruleForm.cardNumber" @blur="getBirthDate"></el-input> -->
                    <el-autocomplete
                      ref="cardNumberInput"
                      v-model.trim="ruleForm.cardNumber"
                      @blur="getBirthDate"
                      @keydown.enter.native="NextInput('birthDateInput')"
                      @select="handleSelect"
                      :fetch-suggestions="querycardNumberAsync"
                      placeholder="请输入证件号码"
                      style="width: 100%"
                      max-length="18"
                    >
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="9">
                  <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker
                      ref="birthDateInput"
                      v-model="ruleForm.birthday"
                      type="date"
                      placeholder="选择出生日期"
                      style="width: 100%"
                      value-format="YYYY-MM-DD"
                      :disabled-date="disableFutureDates"
                      @keydown.enter.native="NextInput('contactsInput')"
                      @blur="birthDateBlur"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="性别" prop="gender">
                    <el-radio
                      v-model="ruleForm.gender"
                      class="el-radio-n"
                      label="男"
                      value="男"
                      border
                      >男</el-radio
                    >
                    <el-radio
                      v-model="ruleForm.gender"
                      class="el-radio-n"
                      label="女"
                      value="女"
                      border
                      >女</el-radio
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="9">
                  <el-form-item label="联系人姓名" prop="contactsName">
                    <el-input
                      ref="contactsInput"
                      v-model="ruleForm.contactsName"
                      placeholder="请输入联系人姓名"
                      @keydown.enter.native="NextInput('contactsNumberInput2')"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="联系人电话" prop="contactsPhoneNumber">
                    <el-input
                      ref="contactsNumberInput2"
                      v-model="ruleForm.contactsPhoneNumber"
                      placeholder="请输入联系人电话"
                      @keydown.enter.native="NextInput('addressInput')"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-form-item label="现住址" prop="address">
                    <el-input
                      ref="addressInput"
                      v-model="ruleForm.address"
                      type="textarea"
                      placeholder="请输入现住址"
                      style="font-size: 16px; color: #c1c1c1"
                      @keydown.enter.native="NextInput('domicileAddressInput')"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-form-item label="户籍地址" prop="domicileAddress">
                    <el-input
                      ref="domicileAddressInput"
                      v-model="ruleForm.domicileAddress"
                      type="textarea"
                      placeholder="请输入户籍地址"
                      style="font-size: 16px; color: #c1c1c1"
                      @keydown.enter.native="NextInput('select')"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-form-item label="随访类型" prop="followType">
                    <el-radio-group
                      v-model="ruleForm.followType"
                      @change="followTypeChange"
                    >
                      <el-radio label="季度随访" value="季度随访"></el-radio>
                      <el-radio
                        label="控制不满意增加随访"
                        value="控制不满意增加随访"
                      ></el-radio>
                      <el-radio label="其他" value="其他"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    v-show="showFollowTypeOther"
                    label=""
                    prop="followTypeOther"
                  >
                    <el-input
                      v-model="ruleForm.followTypeOther"
                      ref="followTypeOtherInput"
                      @keydown.enter.native="NextInput('select2')"
                    >
                      <template v-slot:prepend>其他</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-form-item label="随访方式" prop="followWay">
                    <el-radio-group v-model="ruleForm.followWay">
                      <el-radio
                        label="门诊"
                        value="门诊"
                        name="followWay"
                      ></el-radio>
                      <el-radio
                        label="家庭"
                        value="家庭"
                        name="followWay"
                      ></el-radio>
                      <el-radio
                        label="电话"
                        value="电话"
                        name="followWay"
                      ></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <div
            id="part2"
            style="width: 100%; margin-top: 30px; box-sizing: border-box"
          >
            <!-- 体征 -->
            <div class="shell"></div>
            <el-form
              ref="ruleForm2"
              :model="ruleForm2"
              :rules="rules2"
              label-position="top"
              style="width: 98%"
            >
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <h4 id="bing">病种及症状</h4>
                  <el-form-item label="" class="border" prop="issymptom">
                    <el-checkbox
                      v-model="ruleForm2.issymptom"
                      @change="handleChange"
                      >高血压</el-checkbox
                    >
                  </el-form-item>
                  <el-form-item
                    v-show="ruleForm2.issymptom"
                    label=""
                    prop="symptomHypertension"
                  >
                    <el-checkbox-group
                      v-model="ruleForm2.symptomHypertension"
                      @change="symptomChange"
                    >
                      <el-checkbox
                        label="无症状"
                        value="无症状"
                        @change="symptomChange1"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="头痛头晕"
                        value="头痛头晕"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="恶心呕吐"
                        value="恶心呕吐"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="眼花耳鸣"
                        value="眼花耳鸣"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="呼吸困难"
                        value="呼吸困难"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="心悸胸闷"
                        value="心悸胸闷"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="鼻衄出血不止"
                        value="鼻衄出血不止"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="四肢发麻"
                        value="四肢发麻"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="下肢水肿"
                        value="下肢水肿"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange"
                        label="其他"
                        value="其他"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item
                    v-show="showSymptomOther && ruleForm2.issymptom"
                    label=""
                    prop="symptomOther"
                  >
                    <el-input
                      v-model="ruleForm2.symptomOther"
                      ref="symptomOtherInput"
                      @keydown.enter.native="NextInput('select3')"
                    >
                      <template v-slot:prepend>其他</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label=""
                    class="border"
                    prop="issymptomsDiabetes"
                  >
                    <el-checkbox
                      v-model="ruleForm2.issymptomsDiabetes"
                      @change="handleChange1"
                      >糖尿病</el-checkbox
                    >
                  </el-form-item>
                  <el-form-item
                    v-show="ruleForm2.issymptomsDiabetes"
                    label=""
                    prop="symptomsDiabetes"
                  >
                    <el-checkbox-group
                      v-model="ruleForm2.symptomsDiabetes"
                      @change="symptomsDiabetesChange"
                    >
                      <el-checkbox
                        label="无症状"
                        value="无症状"
                        @change="symptoChange"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="多饮"
                        value="多饮"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="多食"
                        value="多食"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="多尿"
                        value="多尿"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="视力模糊"
                        value="视力模糊"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="感染"
                        value="感染"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="手脚麻木"
                        value="手脚麻木"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="下肢浮肿"
                        value="下肢浮肿"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="体重明显下降"
                        value="体重明显下降"
                      ></el-checkbox>
                      <el-checkbox
                        @change="syChange1"
                        label="其他"
                        value="其他"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item
                    v-show="
                      showSymptomsDiabetesOther && ruleForm2.issymptomsDiabetes
                    "
                    label=""
                    prop="symptomsDiabetesOther"
                  >
                    <el-input
                      v-model="ruleForm2.symptomsDiabetesOther"
                      ref="symptomsDiabetesOtherInput"
                      @keydown.enter.native="NextInput('heightInput')"
                    >
                      <template v-slot:prepend>其他</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <h4>一般情况</h4>

                  <el-form-item
                    label=""
                    prop="height"
                    style="
                      display: flex;
                      flex-direction: column;
                      height: 40px;
                      margin-bottom: 50px !important;
                    "
                  >
                    <el-input
                      v-model="ruleForm2.height"
                      ref="heightInput"
                      @blur="calcTargetHeight"
                      :placeholder="ruleForm2.heightpl"
                      @keydown.enter.native="NextInput('weightInput')"
                      :maxLength="5"
                    >
                      <template v-slot:prepend
                        ><span style="color: #ff0000">*</span>身高</template
                      >
                      <template v-slot:append>cm</template>
                    </el-input>
                    <span
                      v-show="ruleForm2.heightShow"
                      style="color: #ff0000"
                      >{{ ruleForm2.heightmsg }}</span
                    >
                  </el-form-item>
                  <el-form-item
                    label=""
                    prop="weight"
                    style="display: flex; flex-direction: column; height: 40px"
                  >
                    <el-input
                      v-model="ruleForm2.weight"
                      @blur="calcTargetWeight"
                      :placeholder="ruleForm2.weightpl"
                      ref="weightInput"
                      @keydown.enter.native="NextInput('otherInput')"
                      :maxLength="5"
                    >
                      <template v-slot:prepend
                        ><span style="color: #ff0000">*</span>体重</template
                      >
                      <template v-slot:append>kg</template>
                    </el-input>
                    <span
                      v-show="ruleForm2.weightShow"
                      style="color: #ff0000"
                      >{{ ruleForm2.weightmsg }}</span
                    >
                  </el-form-item>
                  <el-form-item label="" prop="targetWeight">
                    <el-input
                      v-model="ruleForm2.targetWeight"
                      :disabled="true"
                      ref="targetWeightInput"
                    >
                      <template v-slot:prepend
                        ><span style="color: #ff0000">*</span>目标体重</template
                      >
                      <template v-slot:append>kg</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label=""
                    prop="other"
                    style="display: flex; flex-direction: column; height: 40px"
                  >
                    <el-input
                      v-model="ruleForm2.other"
                      :placeholder="ruleForm2.otherpl"
                      ref="otherInput"
                      @blur="calcTargetOther"
                      @keydown.enter.native="NextInput('dailySmokingInput')"
                      :maxLength="5"
                    >
                      <template v-slot:prepend>腰围</template>
                      <template v-slot:append>cm</template>
                    </el-input>
                    <span v-show="ruleForm2.otherShow" style="color: #ff0000">{{
                      ruleForm2.othermsg
                    }}</span>
                  </el-form-item>
                  <div class="zu" v-show="tnb">
                    <span style="color: #ff0000">*</span>足背动脉搏动
                  </div>
                  <el-form-item prop="arteryPulsation" v-show="tnb">
                    <el-radio-group v-model="ruleForm2.arteryPulsation">
                      <el-radio :value="'触及正常'"> 触及正常 </el-radio>
                      <el-radio :value="'减弱-双侧'"> 减弱-双侧 </el-radio>
                      <el-radio :value="'减弱-左侧'"> 减弱-左侧 </el-radio>
                      <el-radio :value="'减弱-右侧'"> 减弱-右侧 </el-radio>
                      <el-radio :value="'消失-双侧'"> 消失-双侧 </el-radio>
                      <el-radio :value="'消失-左侧'"> 消失-左侧 </el-radio>
                      <el-radio :value="'消失-右侧'"> 消失-右侧 </el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <!-- 需要确定字段 -->
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div
            id="part3"
            style="
              width: 100%;

              margin-top: 30px;
              box-sizing: border-box;
            "
          >
            <div class="shell"></div>
            <h4 class="titlee" id="life">生活方式</h4>
            <el-form
              ref="ruleForm3"
              :model="ruleForm3"
              :rules="rules3"
              label-position="top"
              class="former"
              style="box-sizing: border-box; width: 98%"
            >
              <el-row :gutter="100" style="display: flex">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="10" style="min-width: 600px">
                  <el-form-item
                    label=""
                    prop="dailySmoking"
                    class="form_item"
                    style="display: flex; position: relative"
                  >
                    <div class="mq">日常</div>
                    <div class="flex_box">
                      <div class="el_titel1">
                        <span style="color: #ff0000">*</span>日吸烟量
                      </div>
                      <el-input
                        v-model="ruleForm3.dailySmoking"
                        ref="dailySmokingInput"
                        class="el_inp"
                        :placeholder="ruleForm3.dailySmoking1"
                        :maxlength="2"
                        @keydown.enter.native="NextInput('targetSmokingInput')"
                      >
                        <template v-slot:append>支</template>
                      </el-input>
                    </div>
                  </el-form-item>
                  <el-form-item
                    label=""
                    prop="dailyDrink"
                    style="display: flex"
                  >
                    <div class="flex_box">
                      <div class="el_titel">
                        <span style="color: #ff0000">*</span>日饮酒量
                      </div>
                      <el-input
                        :maxlength="2"
                        v-model="ruleForm3.dailyDrink"
                        ref="dailyDrinkInput"
                        class="el_inp"
                        :placeholder="ruleForm3.dailyDrink1"
                        @keydown.enter.native="NextInput('targetDrinkInput')"
                      >
                        <!-- <template  v-slot:prepend
                ><span style="color: #ff0000">*</span>日饮酒量</template
              > -->
                        <template v-slot:append>两</template>
                      </el-input>
                    </div>
                  </el-form-item>

                  <div class="sports">
                    <div class="el_titel2">
                      <span style="color: #ff0000">*</span>运动
                    </div>
                    <div style="display: flex; flex: 1; justify-content: end">
                      <el-form-item
                        label=""
                        prop="dailyExerciseFrequency"
                        class="sport1"
                      >
                        <el-input
                          style="width: 115px !important"
                          :maxLength="2"
                          v-model="ruleForm3.dailyExerciseFrequency"
                          class="el_inp1"
                          ref="motiontimeInput"
                          :placeholder="ruleForm3.motion_time1"
                          @keydown.enter.native="NextInput('motionminInput')"
                        >
                          <!-- <template  v-slot:prepend><span style="color: #ff0000">*</span>运动次数</template> -->
                          <template v-slot:append>次/周</template>
                        </el-input>
                      </el-form-item>

                      <!-- <div class="el_wook1">次/周</div> -->
                      <el-form-item
                        label=""
                        prop="dailyExerciseTime"
                        class="sport2"
                      >
                        <el-input
                          style="width: 135px !important"
                          :maxLength="4"
                          v-model="ruleForm3.dailyExerciseTime"
                          class="el_inp2"
                          ref="motionminInput"
                          :placeholder="ruleForm3.motion_min1"
                          @keydown.enter.native="
                            NextInput('targetMotiontimeInput')
                          "
                        >
                          <!-- <template  v-slot:prepend ><span style="color: #ff0000">*</span>运动量</template> -->
                          <template v-slot:append>分钟/次</template>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <el-form-item
                    label=""
                    prop="stapleFood"
                    v-if="tnb"
                    style="display: flex"
                  >
                    <div class="flex_box" v-if="tnb">
                      <div class="el_titel">
                        <span style="color: #ff0000">*</span>主食量
                      </div>
                      <el-input
                        :maxLength="4"
                        v-model="ruleForm3.stapleFood"
                        @keydown.enter.native="
                          NextInput('targetStapleFoodInput')
                        "
                        ref="stapleFoodInput"
                        class="el_inp"
                        :placeholder="ruleForm3.stapleFood1"
                      >
                        <!-- <template  v-slot:prepend><span style="color: #ff0000">*</span>主食量</template> -->
                        <template v-slot:append>克/日</template>
                      </el-input>
                    </div>
                  </el-form-item>
                  <el-form-item prop="saltRelated" v-show="gxy">
                    <div class="flex_box">
                      <div class="el_titel3">
                        <span style="color: #ff0000">*</span>摄盐情况（咸淡）
                      </div>
                      <el-radio-group
                        v-model="ruleForm3.saltRelated"
                        class="salt"
                      >
                        <el-radio label="轻" value="轻"></el-radio>
                        <el-radio label="中" value="中"></el-radio>
                        <el-radio label="重" value="重"></el-radio>
                      </el-radio-group>
                    </div>
                  </el-form-item>
                  <!-- <el-form-item label="" prop="stapleFoodName">
                      <el-input v-model="ruleForm3.stapleFoodName">
                        <template  v-slot:prepend>主食名</template>
                        <template v-slot:append> </template>
                      </el-input>
                    </el-form-item> -->

                  <el-form-item label="心理调整" prop="psychological">
                    <el-radio-group v-model="ruleForm3.psychological">
                      <el-radio label="良好" value="良好"></el-radio>
                      <el-radio label="一般" value="一般"></el-radio>
                      <el-radio label="差" value="差"></el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="遵医行为" prop="complianceBehavior">
                    <el-radio-group v-model="ruleForm3.complianceBehavior">
                      <el-radio label="良好" value="良好"></el-radio>
                      <el-radio label="一般" value="一般"></el-radio>
                      <el-radio label="差" value="差"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="min-width: 400px">
                  <el-form-item
                    label=""
                    prop="targetSmoking"
                    style="display: flex; position: relative"
                  >
                    <div class="jy">目标</div>
                    <el-input
                      :maxlength="2"
                      :placeholder="ruleForm3.targetSmoking1"
                      v-model="ruleForm3.targetSmoking"
                      class="el_inp"
                      ref="targetSmokingInput"
                      @keydown.enter.native="NextInput('dailyDrinkInput')"
                    >
                      <!-- <template  v-slot:prepend><span style="color: #ff0000">*</span>日吸烟量</template> -->
                      <template v-slot:append>支</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="" prop="targetDrink">
                    <el-input
                      :maxlength="2"
                      :placeholder="ruleForm3.targetDrink1"
                      v-model="ruleForm3.targetDrink"
                      class="el_inp"
                      ref="targetDrinkInput"
                      @keydown.enter.native="NextInput('motiontimeInput')"
                    >
                      <!-- <template  v-slot:prepend><span style="color: #ff0000">*</span>日饮酒量</template > -->
                      <template v-slot:append>两</template>
                    </el-input>
                  </el-form-item>
                  <div class="sports1">
                    <el-form-item label="" prop="targetExerciseFrequency">
                      <el-input
                        style="width: 115px !important"
                        :maxLength="2"
                        :placeholder="ruleForm3.targetMotion_time1"
                        v-model="ruleForm3.targetExerciseFrequency"
                        class="el_inp1"
                        ref="targetMotiontimeInput"
                        @keydown.enter.native="
                          NextInput('targetMotionminInput')
                        "
                      >
                        <!-- <template  v-slot:prepend><span style="color: #ff0000">*</span>运动次数</template> -->
                        <template v-slot:append>次/周</template>
                      </el-input>
                    </el-form-item>
                    <!-- <div class="el_wook1">次/周</div> -->
                    <el-form-item label="" prop="targetExerciseTime">
                      <el-input
                        style="width: 135px !important"
                        :maxLength="4"
                        v-model="ruleForm3.targetExerciseTime"
                        :placeholder="ruleForm3.targetMotion_min1"
                        class="el_inp2"
                        ref="targetMotionminInput"
                        @keydown.enter.native="NextInput('stapleFoodInput')"
                      >
                        <!-- <template  v-slot:prepend><span style="color: #ff0000">*</span>运动量</template> -->
                        <template v-slot:append>分钟/次</template>
                      </el-input>
                    </el-form-item>
                    <!-- <div class="el_wook2">分钟/次</div> -->
                  </div>
                  <div>
                    <el-form-item label="" prop="targetStapleFood" v-show="tnb">
                      <el-input
                        :maxLength="4"
                        :placeholder="ruleForm3.targetStapleFood1"
                        v-model="ruleForm3.targetStapleFood"
                        class="el_inp"
                        ref="targetStapleFoodInput"
                        @keydown.enter.native="NextInput('heartRateInput')"
                      >
                        <!-- <template  v-slot:prepend>主食量</template> -->
                        <template v-slot:append>克/日</template>
                      </el-input>
                    </el-form-item>
                  </div>
                  <el-form-item prop="targetRelated" v-show="gxy">
                    <el-radio-group
                      v-model="ruleForm3.targetRelated"
                      style="margin-top: 8px"
                    >
                      <el-radio label="轻" value="轻"></el-radio>
                      <el-radio label="中" value="中"></el-radio>
                      <el-radio label="重" value="重"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row :gutter="20">
        <el-col :span="3">&nbsp;</el-col>
      </el-row> -->
            </el-form>
          </div>
          <div
            id="part4"
            style="
              width: 100%;

              margin-top: 30px;
              box-sizing: border-box;
            "
          >
            <div class="shell"></div>
            <el-form
              ref="Form4"
              :model="ruleForm4"
              :rules="rules4"
              label-position="top"
              style="box-sizing: border-box; width: 98%"
            >
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <h4 id="zong">随访总结</h4>
                  <el-form-item label="" prop="heartRate" name="heartRate">
                    <el-input
                      :maxLength="4"
                      v-model="ruleForm4.heartRate"
                      placeholder="请输入心率"
                      ref="heartRateInput"
                      @input="debouncedCalcTargetHeartRate"
                      @keydown.enter.native="NextInput('bloodPressurelInput')"
                    >
                      <template v-slot:prepend>心率</template>
                      <template v-slot:append>次/分</template>
                    </el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label=""
                        prop="systolicPressure"
                        name="systolicPressure"
                      >
                        <el-input
                          id="xueya"
                          :maxLength="4"
                          @input="debounceFunction"
                          v-model="ruleForm4.systolicPressure"
                          placeholder="请输入收缩压"
                          ref="bloodPressurelInput"
                          @keydown.enter.native="
                            NextInput('bloodPressurerInput')
                          "
                        >
                          <template v-slot:prepend
                            ><span style="color: #ff0000" v-if="getFollowWay"
                              >*</span
                            >
                            血压</template
                          >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label=""
                        prop="diastolicPressure"
                        name="diastolicPressure"
                      >
                        <el-input
                          :maxLength="4"
                          @input="debounceFunction2"
                          ref="bloodPressurerInput"
                          v-model="ruleForm4.diastolicPressure"
                          placeholder="请输入舒张压"
                          @keydown.enter.native="NextInput('select4')"
                        >
                          <template v-slot:append>mmHg</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item
                    label=""
                    prop="fastingBloodGlucose"
                    v-show="tnb"
                    id="sumi"
                  >
                    <el-input
                      :maxLength="5"
                      @input="debounceFunction4"
                      ref="fastingBloodGlucoseInput"
                      v-model="ruleForm4.fastingBloodGlucose"
                      placeholder="请输入空腹血糖"
                      @keydown.enter.native="
                        NextInput('auxiliaryInspectionInput')
                      "
                    >
                      <template v-slot:prepend>空腹血糖</template>
                      <template v-slot:append>mmol/L</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="" prop="randomBloodGlucose" v-show="tnb">
                    <el-input
                      :maxLength="5"
                      @input="debounceFunction3"
                      ref="auxiliaryInspectionInput"
                      v-model="ruleForm4.randomBloodGlucose"
                      placeholder="请输入随机血糖"
                      @keydown.enter.native="
                        NextInput(
                          ruleForm4.isreferral ? 'referralInput' : 'drugInput'
                        )
                      "
                    >
                      <template v-slot:prepend>随机血糖</template>
                      <template v-slot:append>mmol/L</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    v-show="dTobj !== '糖尿病'"
                    id="sumize"
                    label="高血压随访分类"
                    class="bxlabel"
                    prop="classFollowHypertension"
                  >
                    <!-- v-show="gxy" -->
                    <!-- <el-checkbox-group v-model="ruleForm4.classFollowHypertension" @change="syChange4">
              <el-checkbox label="控制满意" value="控制满意" ></el-checkbox>
              <el-checkbox label="控制不满意" value="控制不满意" @change="syChange5"></el-checkbox>
              <el-checkbox label="不良反应" value="不良反应"  @change="syChange5"></el-checkbox>
              <el-checkbox label="并发症" value="并发症"  @change="syChange5"></el-checkbox>
            </el-checkbox-group> -->
                    <el-radio-group v-model="ruleForm4.classFollowHypertension">
                      <el-radio label="控制满意" value="控制满意"></el-radio>
                      <el-radio
                        label="控制不满意"
                        value="控制不满意"
                      ></el-radio>
                      <el-radio label="不良反应" value="不良反应"></el-radio>
                      <el-radio label="并发症" value="并发症"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="糖尿病随访分类"
                    class="bxlabel"
                    prop="classFollowDiabetes"
                    v-show="tnb"
                  >
                    <el-radio-group v-model="ruleForm4.classFollowDiabetes">
                      <el-radio label="控制满意" value="控制满意"></el-radio>
                      <el-radio
                        label="控制不满意"
                        value="控制不满意"
                      ></el-radio>
                      <el-radio label="不良反应" value="不良反应"></el-radio>
                      <el-radio label="并发症" value="并发症"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="低血糖反应"
                    prop="hypoglycemicReactions"
                    v-show="tnb"
                  >
                    <el-radio-group v-model="ruleForm4.hypoglycemicReactions">
                      <el-radio label="无" value="无"></el-radio>
                      <el-radio label="偶尔" value="偶尔"></el-radio>
                      <el-radio label="频繁" value="频繁"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label=""
                    class="border"
                    prop="isreferral"
                    style="margin-bottom: 20px"
                  >
                    <el-checkbox v-model="ruleForm4.isreferral"
                      >转诊</el-checkbox
                    >
                  </el-form-item>
                  <el-form-item
                    v-show="ruleForm4.isreferral"
                    label=""
                    prop="referralReason"
                  >
                    <el-input
                      v-model="ruleForm4.referralReason"
                      ref="referralInput"
                      @keydown.enter.native="NextInput('institutionInput')"
                      placeholder="请输入转诊原因"
                    >
                      <template v-slot:prepend
                        ><span style="color: #ff0000">*</span>转诊原因</template
                      >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    v-show="ruleForm4.isreferral"
                    label=""
                    prop="referralInstitution"
                  >
                    <el-input
                      v-model="ruleForm4.referralInstitution"
                      ref="institutionInput"
                      @keydown.enter.native="NextInput('drugInput')"
                      placeholder="请输入机构及科别"
                    >
                      <template v-slot:prepend
                        ><span style="color: #ff0000">*</span
                        >机构及科别</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div id="part5" style="height: 500px; width: 100%; margin-top: 30px">
            <div class="shell"></div>
            <div>
              <el-row :gutter="20" style="margin-bottom: 10px">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <h4 id="drug">用药情况</h4>
                  <el-row style="border-bottom: 1px solid #c1c1c1">
                    <el-col :span="21">
                      <h4 style="margin: 10px 0">药品</h4>
                    </el-col>
                    <el-col :span="3" style="text-align: right"
                      ><el-button type="primary" @click="addDrug"
                        >新增</el-button
                      ></el-col
                    >
                  </el-row>
                </el-col>
                <el-col :span="3">&nbsp;</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-form
                    ref="drugValidateForm"
                    :model="drugValidateForm"
                    label-width="0"
                    class="demo-dynamic"
                  >
                    <el-row
                      v-for="(drug, index) in drugValidateForm.drugs"
                      :key="drug.key"
                      :gutter="20"
                    >
                      <el-col :span="3" style="text-align: left">药品</el-col>
                      <el-col :span="18">
                        <el-form-item
                          label=""
                          :prop="'drugs.' + index + '.药品名称'"
                          :rules="{
                            required: true,
                            message: '药名不能为空',
                            trigger: 'blur',
                          }"
                        >
                          <el-input
                            v-model="drug.药品名称"
                            ref="drugInput"
                            @keydown.enter.native="
                              NextInput('drugDayInput', index)
                            "
                          >
                            <template v-slot:prepend>药品名称</template>
                          </el-input>
                        </el-form-item>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item
                              label=""
                              :prop="'drugs.' + index + '.用药类型'"
                            >
                              <el-radio-group v-model="drug.用药类型">
                                <el-radio label="外院"></el-radio>
                                <el-radio label="自购"></el-radio>
                                <el-radio label="本院"></el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="12">
                            <el-form-item
                              label=""
                              :prop="'drugs.' + index + '.天'"
                              :rules="{
                                required: true,
                                message: '天不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="drug.天"
                                ref="drugDayInput"
                                @keydown.enter.native="
                                  NextInput('drugCountInput', index)
                                "
                              >
                                <template v-slot:prepend>用量</template>
                                <template v-slot:append>天</template>
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item
                              label=""
                              :prop="'drugs.' + index + '.次'"
                              :rules="{
                                required: true,
                                message: '次数不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="drug.次"
                                ref="drugCountInput"
                                @keydown.enter.native="
                                  NextInput('drugUseInput', index)
                                "
                              >
                                <template v-slot:append>次</template>
                              </el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item
                              label=""
                              :prop="'drugs.' + index + '.用量'"
                              :rules="{
                                required: true,
                                message: '用量不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="drug.用量"
                                ref="drugUseInput"
                                @keydown.enter.native="
                                  NextInput('drugUnitInput', index)
                                "
                              >
                                <template v-slot:prepend>每次</template>
                                <template v-slot:append>/</template>
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item
                              label=""
                              :prop="'drugs.' + index + '.单位'"
                              :rules="{
                                required: true,
                                message: '单位不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="drug.单位"
                                ref="drugUnitInput"
                                @keydown.enter.native="
                                  NextInput('drugInput', index)
                                "
                              >
                                <template v-slot:append>(单位)</template>
                              </el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="3" style="text-align: right"
                        ><el-button
                          style="margin-top: 5px"
                          @click.prevent="removeDrug(drug)"
                          >删除</el-button
                        ></el-col
                      >
                    </el-row>
                  </el-form>
                </el-col>
                <el-col :span="3">&nbsp;</el-col>
              </el-row>
              <el-row :gutter="20" style="margin-bottom: 10px">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-row style="border-bottom: 1px solid #c1c1c1">
                    <el-col :span="21">
                      <h4 style="margin: 10px 0">胰岛素</h4>
                    </el-col>
                    <el-col :span="3" style="text-align: right"
                      ><el-button type="primary" @click="addInsulin"
                        >新增</el-button
                      ></el-col
                    >
                  </el-row>
                </el-col>
                <el-col :span="3">&nbsp;</el-col>
              </el-row>
              <el-row :gutter="20" style="margin-bottom: 10px">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-form
                    ref="insulinValidateForm"
                    :model="insulinValidateForm"
                    label-width="0"
                    class="demo-dynamic"
                  >
                    <el-row
                      v-for="(insulin, index) in insulinValidateForm.insulins"
                      :key="insulin.key"
                      :gutter="20"
                    >
                      <el-col :span="3" style="text-align: left">胰岛素</el-col>
                      <el-col :span="18">
                        <el-form-item
                          label=""
                          :prop="'insulins.' + index + '.药品名称'"
                          :rules="{
                            required: true,
                            message: '药名不能为空',
                            trigger: 'blur',
                          }"
                        >
                          <el-input
                            v-model="insulin.药品名称"
                            ref="insulinNameInput"
                            @keydown.enter.native="
                              NextInput('insulinDayInput', index)
                            "
                          >
                            <template v-slot:prepend>药品名称</template>
                          </el-input>
                        </el-form-item>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item
                              label=""
                              :prop="'insulins.' + index + '.用药类型'"
                            >
                              <el-radio-group v-model="insulin.用药类型">
                                <el-radio label="外院"></el-radio>
                                <el-radio label="自购"></el-radio>
                                <el-radio label="本院"></el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="24">
                            <el-form-item
                              label=""
                              :prop="'insulins.' + index + '.用法'"
                              :rules="{
                                required: true,
                                message: '用法不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="insulin.用法"
                                ref="insulinDayInput"
                                @keydown.enter.native="
                                  NextInput('insulinUseInput', index)
                                "
                              >
                                <template v-slot:prepend>用法</template>
                                <!-- <template v-slot:append>天</template> -->
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <!-- <el-col :span="20">
                            <el-form-item
                              label=""
                              :prop="'insulins.' + index + '.次'"
                              :rules="{
                                required: true,
                                message: '次数不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="insulin.次"
                                ref="insulinTimeInput"
                                @keydown.enter.native="
                                  NextInput('insulinUseInput', index)
                                "
                              >
                                <template v-slot:append>次</template>
                              </el-input>
                            </el-form-item>
                          </el-col> -->
                        </el-row>
                        <el-row>
                          <el-col :span="24">
                            <el-form-item
                              label=""
                              :prop="'insulins.' + index + '.用量'"
                              :rules="{
                                required: true,
                                message: '用量不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="insulin.用量"
                                ref="insulinUseInput"
                                @keydown.enter.native="
                                  NextInput('insulinNameInput', index)
                                "
                              >
                                <template v-slot:prepend>用量</template>
                                <!-- <template v-slot:append>/</template> -->
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <!-- <el-col :span="12">
                            <el-form-item
                              label=""
                              :prop="'insulins.' + index + '.单位'"
                              :rules="{
                                required: true,
                                message: '单位不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <el-input
                                v-model="insulin.单位"
                                ref="insulinUnitInput"
                                @keydown.enter.native="
                                  NextInput('insulinDayInput', index)
                                "
                              >
                                <template v-slot:append>(单位)</template>
                              </el-input>
                            </el-form-item>
                          </el-col> -->
                        </el-row>
                      </el-col>
                      <el-col :span="3" style="text-align: right"
                        ><el-button
                          style="margin-top: 5px"
                          @click.prevent="removeInsulin(insulin)"
                          >删除</el-button
                        ></el-col
                      >
                    </el-row>
                  </el-form>
                </el-col>
                <el-col :span="3">&nbsp;</el-col>
              </el-row>
              <el-row>
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="18">
                  <el-form
                    ref="ruleForm4"
                    :model="ruleForm4"
                    label-width="0"
                    class="demo_r"
                  >
                    <el-col :span="12">
                      <el-form-item
                        prop="followTime"
                        class="data"
                        :inline="true"
                      >
                        <div style="display: flex; width: 30vw">
                          <div
                            style="
                              margin-right: 20px;
                              font-size: 14px;
                              font-weight: 700;
                            "
                          >
                            随访日期
                          </div>
                          <el-date-picker
                            v-model="ruleForm4.followTime"
                            @keydown.enter.native="
                              NextInput('nextFollowTimeHypertensionInput')
                            "
                            ref="followTimePickerInput"
                            type="date"
                            placeholder="选择日期"
                            value-format="YYYY-MM-DD"
                            :disabled-date="disableFutureDates"
                          ></el-date-picker>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="display: flex">
                      <el-form-item
                        prop="nextFollowTimeHypertension"
                        class="nextime"
                        v-show="gxy"
                      >
                        <div style="display: flex; width: 30vw">
                          <div
                            style="
                              margin-right: 20px;
                              font-size: 14px;
                              font-weight: 700;
                            "
                          >
                            高血压下次随访日期
                          </div>
                          <el-date-picker
                            v-model="ruleForm4.nextFollowTimeHypertension"
                            @keydown.enter.native="
                              NextInput('nextFollowTimeDiabetesInpu')
                            "
                            ref="nextFollowTimeHypertensionInput"
                            :disabled-date="disableNextTiem"
                            type="date"
                            placeholder="请选择高血压下次随访日期"
                            value-format="YYYY-MM-DD"
                          ></el-date-picker>
                        </div>
                      </el-form-item>
                      <el-form-item
                        prop="nextFollowTimeHypertension"
                        class="nextime"
                        v-show="tnb"
                      >
                        <div style="display: flex; width: 30vw">
                          <div
                            style="
                              margin-right: 20px;
                              font-size: 14px;
                              font-weight: 700;
                            "
                          >
                            糖尿病下次随访日期
                          </div>
                          <el-date-picker
                            v-model="ruleForm4.nextFollowTimeDiabetes"
                            @keydown.enter.native="
                              NextInput('nextFollowTimeDiabetesInpu')
                            "
                            ref="nextFollowTimeDiabetesInpu"
                            :disabled-date="disableNextTiem"
                            type="date"
                            placeholder="请选择糖尿病下次随访日期"
                            value-format="YYYY-MM-DD"
                          ></el-date-picker>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item prop="remark">
                        <div style="display: flex; width: 100%">
                          <div
                            style="
                              margin-right: 20px;
                              font-size: 14px;
                              font-weight: 700;
                              width: 56px;
                            "
                          >
                            备注
                          </div>
                          <el-input
                            style="height: 50px"
                            v-model="ruleForm4.remark"
                            type="textarea"
                            ref="nextFollowTimeDiabetesInpu"
                            placeholder="请输入备注"
                            :maxlength="200"
                          ></el-input>
                        </div>
                      </el-form-item>
                    </el-col>
                    <!-- <el-form-item
              v-show="tnb"
              prop="nextFollowTimeDiabetes"
              class="nextime"
            >
              <div style="display: flex; width: 30vw">
                <div
                  style="margin-right: 20px; font-size: 14px; font-weight: 700"
                >
                  糖尿病下次随访日期
                </div>
                <el-date-picker
                  v-model="ruleForm4.nextFollowTimeDiabetes"
                  ref="nextFollowTimeDiabetesInpu"
                  :picker-options="pickerOptions1"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </div>
            </el-form-item> -->
                    <input type="text" style="display: none" />
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-row class="main-bottom">
        <el-button @click="resetForm">清 空</el-button>
        <el-button type="primary" @click="onSubmit()">保 存</el-button>
      </el-row>
    </el-row>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
// import   ElMessage from "element-plus";
import { ElMessage } from "element-plus";
import { debounce } from "lodash";
import http from "@/utils/request";
import crypto from "@/utils/crypto";
const disableFutureDates = (time) => time > new Date();
const disableNextDates = (time) => time < new Date();
export default {
  components: {},
  setup() {
    const containerRef = ref<HTMLElement | null>(null);
    return {
      containerRef,
    };
  },
  data() {
    const validateName = (rule, value, callback) => {
      setTimeout(() => {
        //@ts-ignore
        const value1 = this.ruleForm.name;
        if (value1 == "") {
          callback(new Error("请输入姓名"));
        } else if (/^\d+$/.test(value1)) {
          callback(new Error("姓名不能是数字"));
        } else {
          callback();
        }
      }, 0);
    };
    const validateMobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else if (/^(?:\d|-){1,12}(?:-\d{1,12})?$/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的联系方式"));
      }
    };
    const validatorIdCard = (rule, value, callback) => {
      setTimeout(() => {
        //@ts-ignore
        const value2 = this.ruleForm.cardNumber;
        if (value2 == "") {
          callback(new Error("请输入证件号码"));
          //@ts-ignore
        } else if (
          !/^\d{15}|^\d{17}[a-z]$/i.test(value2) &&
          this.ruleForm.cardType == "居民身份证"
        ) {
          callback(new Error("请输入正确的证件号码"));
        } else {
          callback();
        }
      }, 200);
    };
    const validateNum = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNumR = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else {
          callback();
        }
      } else {
        callback(new Error("此项需填写"));
      }
    };
    const validateNum300 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 0 || value > 300) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback(new Error("此项需填写"));
      }
    };
    const validateNum30 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 0 || value > 30) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum20 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 0 || value > 20) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };

    const validateNum1200 = (rule, value, callback) => {
      //@ts-ignore
      if (this.ruleForm3.dailyExerciseFrequency != "0" && value == "0") {
        callback("请输入正确的范围");
      }
      //@ts-ignore
      if (this.ruleForm3.dailyExerciseFrequency == "0" && value == "0") {
        callback();
      } else if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 1 || value > 1200) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum1201 = (rule, value, callback) => {
      //@ts-ignore
      if (this.ruleForm3.targetExerciseFrequency != "0" && value == "0") {
        callback("请输入正确的范围");
      }
      //@ts-ignore
      if (this.ruleForm3.targetExerciseFrequency == "0" && value == "0") {
        callback();
      } else if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 1 || value > 1200) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum21 = (rule, value, callback) => {
      //@ts-ignore
      if (this.ruleForm3.targetExerciseTime != "0" && value == "0") {
        callback("请输入正确的范围");
      }
      //@ts-ignore
      if (this.ruleForm3.targetExerciseTime == "0" && value == "0") {
        callback();
      } else if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 1 || value > 1200) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum3000 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 100 || value > 3000) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum3001 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 100 || value > 3000) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum250 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 30 || value > 250) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        if (this.getFollowWay) {
          callback(new Error("请输入收缩压"));
        } //@ts-ignore
        else if (this.ruleForm4.diastolicPressure !== "") {
          callback(new Error("请输入收缩压"));
        } else {
          callback();
        }
      }
    };
    const validateNum140 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 30 || value > 140) {
          callback(new Error("请输入正确的范围"));
        } else if (value >= this.ruleForm4.systolicPressure - 0) {
          console.log(value, this.ruleForm4.systolicPressure);
          callback(new Error("舒张压应小于收缩压"));
        } else {
          callback();
        }
      } else {
        if (this.getFollowWay) {
          callback(new Error("请输入舒张压"));
        }
        //@ts-ignore
        else if (value && this.ruleForm4.systolicPressure == "") {
          callback(new Error("请输入收缩压"));
        } else {
          callback();
        }
      }
    };
    const validateNum219 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 40 || value > 220) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };

    const validateNum43 = (rule, value, callback) => {
      if (value !== "") {
        if (
          !/^(?=[0-9]*\.[0-9]?|[1-9][0-9]*\.?[0-9]?)\d*\.?\d{0,2}$/.test(value)
        ) {
          callback(new Error("请输入正常范围"));
        } else if (value < 2.8 || value > 43) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum100 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 0 || value > 100) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum101 = (rule, value, callback) => {
      //@ts-ignore
      const dailySmoking = Number(this.ruleForm3.dailySmoking);
      console.log(dailySmoking);
      //@ts-ignore
      const dailySmoking1 = Number(this.ruleForm3.dailySmoking1);
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 0 || value > 100) {
          callback(new Error("请输入正确的范围"));
          //@ts-ignore
        } else if (dailySmoking) {
          if (value > dailySmoking) {
            callback(new Error("目标吸烟量不能大于日常吸烟量"));
          } else {
            callback();
          }
        } else if (dailySmoking1) {
          if (value > dailySmoking1) {
            callback(new Error("目标吸烟量不能大于日常吸烟量"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum50 = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 0 || value > 50) {
          callback(new Error("请输入正确的范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateNum51 = (rule, value, callback) => {
      if (value !== "") {
        //@ts-ignore
        const dailyDrink = Number(this.ruleForm3.dailyDrink);
        //@ts-ignore
        const targetDrink = Number(this.ruleForm3.dailyDrink1);
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 0 || value > 50) {
          callback(new Error("请输入正确的范围"));
          //@ts-ignore
        } else if (dailyDrink) {
          if (value > dailyDrink) {
            callback(new Error("目标饮酒量不能大于日常饮酒量"));
          } else {
            callback();
          }
        } else if (targetDrink) {
          if (value > targetDrink) {
            callback(new Error("目标饮酒量不能大于日常饮酒量"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validTemperature = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value < 34 || value > 43) {
          callback(new Error("请输入正确的体温"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请填写体温"));
      }
    };
    const validture = (rule, value, callback) => {
      if (value !== "") {
        callback();
      } else {
        callback(new Error("此项为必填"));
      }
    };
    const validture1 = (rule, value, callback) => {
      //@ts-ignore
      if (this.ruleForm4.isreferral) {
        if (value !== "") {
          callback();
        } else {
          callback(new Error("此项为必填"));
        }
      } else {
        callback();
      }
    };

    const validPulseRate = (rule, value, callback) => {
      if (value !== "") {
        if (/[^\d.]/g.test(value)) {
          callback(new Error("只能输入数字"));
        } else if (value > 300) {
          callback(new Error("请输入正常范围"));
        } else {
          callback();
        }
      } else {
        callback(new Error("此项需填写"));
      }
    };
    //身高
    const validPulseRate1 = (rule, value, callback) => {
      if (value !== "") {
        if (
          !/^(?=[0-9]*\.[0-9]?|[1-9][0-9]*\.?[0-9]?)\d*\.?\d{0,1}$/.test(value)
        ) {
          callback(new Error("请输入正常范围"));
        } else if (value < 50 || value > 250) {
          callback(new Error("请输入正常范围"));
        } else {
          callback();
        }
      } else {
        //@ts-ignore
        if (this.ruleForm2.heightpl != "请输入身高") {
          callback();
        } else {
          callback(new Error("请输入身高"));
        }
      }
    };
    //腰围
    const validPulseRate3 = (rule, value, callback) => {
      if (value !== "") {
        console.log(value);
        if (
          !/^(?=[0-9]*\.[0-9]?|[1-9][0-9]*\.?[0-9]?)\d*\.?\d{0,1}$/.test(value)
        ) {
          callback(new Error("请输入正常范围"));
        } else if (value < 35 || value > 300) {
          callback(new Error("请输入正常范围"));
          //@ts-ignore
        } else if (
          this.ruleForm.gender == "男" &&
          (value < 40 || value > 300)
        ) {
          callback(new Error("请输入正常范围"));
          //@ts-ignore
        } else if (
          this.ruleForm.gender == "女" &&
          (value < 35 || value > 300)
        ) {
          callback(new Error("请输入正常范围"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    //体重
    const validPulseRate2 = (rule, value, callback) => {
      if (value !== "") {
        if (
          !/^(?=[0-9]*\.[0-9]?|[1-9][0-9]*\.?[0-9]?)\d*\.?\d{0,1}$/.test(value)
        ) {
          callback(new Error("请输入正常范围"));
        } else if (value < 20 || value > 300) {
          callback(new Error("请输入正常范围"));
        } else {
          callback();
        }
      } else {
        //@ts-ignore
        if (this.ruleForm2.weightpl != "请输入体重") {
          callback();
        } else {
          callback(new Error("请输入体重"));
        }
      }
    };
    //足背
    const tnbture = (rule, value, callback) => {
      console.log(value);
      if (
        //@ts-ignore
        !this.ruleForm2.arteryPulsation &&
        //@ts-ignore
        this.ruleForm2.issymptomsDiabetes
      ) {
        callback(new Error("请选择足背动脉搏动"));
        // ElMessage.error("请选择足背动脉搏动");
      } else {
        callback();
      }
    };
    return {
      customValidation: false,
      tabName: "1",
      gxy: true,
      tnb: true,
      dTobj: "",
      dTobj1: "",
      showName: "",
      showCardNumber: "",
      iszz: {
        iszz1: false,
        iszz2: false,
        iszz3: false,
        iszz4: false,
        iszz5: false,
        iszz6: false,
      },
      formDate: {},
      FormData1: {},
      FormData2: {},
      iszzshow: false,
      pickerOptions: {
        disabledDate(time) {
          // 获取今天的日期
          const today = new Date();
          // 将日期设置为今天的最后一刻，即今天的23:59:59
          today.setHours(23, 59, 59, 999);
          // 如果选择的日期在今天之后，则禁用
          return time.getTime() > today.getTime();
        },
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },

      ruleForm: {
        name: "",
        phoneNumber: "",
        cardNumber: "",
        cardType: "居民身份证",
        birthday: "",
        gender: "",
        contactsName: "",
        contactsPhoneNumber: "",
        allergy: "",
        address: "",
        domicileAddress: "",
        followType: "季度随访",
        followWay: "门诊",
        followTypeOther: "",
      },
      rules: {
        name: [{ required: true, validator: validateName, trigger: "blur" }],
        phoneNumber: [
          { required: true, validator: validateMobile, trigger: "blur" },
        ],
        cardNumber: [
          { required: true, validator: validatorIdCard, trigger: "blur" },
        ],
        birthday: [
          { required: true, message: "请选择出生日期", trigger: "change" },
        ],
        cardType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { max: 20, message: "最多20个字符", trigger: "blur" },
        ],
        contactsPhoneNumber: [
          { required: true, validator: validateMobile, trigger: "blur" },
        ],
        allergy: [{ message: "请填写过敏史", trigger: "blur" }],
        address: [{ required: true, message: "请输入现住址", trigger: "blur" }],
        domicileAddress: [
          { required: true, message: "请输入户籍地址", trigger: "blur" },
        ],
        // followType: [
        //   {
        //     required: true,
        //     message: "请至少选择一个随访类型",
        //     trigger: "change",
        //   },
        // ],
        // followWay: [
        //   {
        //     required: true,
        //     message: "请至少选择一个随访方式",
        //     trigger: "change",
        //   },
        // ],
      },
      ruleForm2: {
        symptomHypertension: ["无症状"],
        // 高血压
        issymptom: false,
        // 糖尿病
        issymptomsDiabetes: false,
        //返回的病种
        diaeaseType: "",
        symptomOther: "",
        symptomsDiabetes: ["无症状"],
        symptomsDiabetesOther: "",
        temperature: "",
        // pulseRate: '',
        weight: "",
        targetWeight: "",
        height: "",
        arteryPulsation: "触及正常",
        other: "",
        heightpl: "请输入身高",
        weightpl: "请输入体重",
        otherpl: "请输入腰围",
        heightmsg: "",
        weightmsg: "",
        othermsg: "",
        heightShow: false,
        weightShow: false,
        otherShow: false,
      },
      rules2: {
        symptomHypertension: [
          { required: true, validator: validture, trigger: "blur" },
        ],
        temperature: [
          { required: true, validator: validTemperature, trigger: "blur" },
        ],
        // pulseRate: [
        //   { required: true, validator: validPulseRate, trigger: 'blur' }
        // ],

        weight: [{ validator: validPulseRate2, trigger: "blur" }],
        height: [{ validator: validPulseRate1, trigger: "blur" }],
        other: [{ validator: validPulseRate3, trigger: "blur" }],
        arteryPulsation: [{ validator: tnbture, trigger: "change" }],
        // systolicPressure: [
        //   { validator: validateNum, trigger: 'blur' }
        // ],
        // diastolicPressure: [
        //   { validator: validateNum, trigger: 'blur' }
        // ],
      },
      ruleForm3: {
        saltRelated: "轻",
        // stapleFoodName: '',
        targetRelated: "轻",
        psychological: "良好",
        complianceBehavior: "良好",
        dailyExerciseFrequency: "",
        dailyExerciseTime: "",
        targetExerciseTime: "",
        targetExerciseFrequency: "",
        targetStapleFood: "",
        targetSmoking: "",
        targetDrink: "",
        stapleFood: "",
        dailySmoking: "",
        dailyDrink: "",

        motion_time1: "5",
        motion_min1: "30",
        stapleFood1: "350",
        dailySmoking1: "0",
        dailyDrink1: "0",
        targetMotion_time1: "5",
        targetMotion_min1: "30",
        targetStapleFood1: "350",
        targetSmoking1: "0",
        targetDrink1: "0",
      },
      rules3: {
        dailyExerciseFrequency: [{ validator: validateNum20, trigger: "blur" }],
        dailyExerciseTime: [{ validator: validateNum1200, trigger: "blur" }],
        // saltRelated: [
        //   {  message: "至少选一个", trigger: "change" },
        // ],
        stapleFood: [{ validator: validateNum3000, trigger: "blur" }],
        dailySmoking: [{ validator: validateNum100, trigger: "blur" }],
        dailyDrink: [{ validator: validateNum50, trigger: "blur" }],
        targetStapleFood: [{ validator: validateNum3001, trigger: "blur" }],
        targetExerciseTime: [{ validator: validateNum1201, trigger: "blur" }],
        //
        targetExerciseFrequency: [
          { validator: validateNum20, trigger: "blur" },
        ],
        targetSmoking: [{ validator: validateNum101, trigger: "blur" }],
        targetDrink: [{ validator: validateNum51, trigger: "blur" }],
        // psychological: [
        //   { required: true, message: "至少选一个", trigger: "change" },
        // ],
        // targetRelated: [
        //   { required: true, message: "至少选一个", trigger: "change" },
        // ],
        // complianceBehavior: [
        //   { required: true, message: "至少选一个", trigger: "change" },
        // ],
      },
      ruleForm4: {
        // 血压控制
        classFollowHypertension: "控制满意",
        classFollowDiabetes: "控制满意",
        hypoglycemicReactions: "无",
        isreferral: false,
        referralReason: "",
        referralInstitution: "",
        // 随访时间
        followTime: this.formatDateToYYYYMMDD(new Date()),
        // 收缩压
        systolicPressure: "",
        // 舒张压
        diastolicPressure: "",
        // 心率
        heartRate: "",
        // 空腹血糖
        fastingBloodGlucose: "",
        // 随机血糖
        randomBloodGlucose: "",
        //高血压下次随访时间
        nextFollowTimeHypertension: "",
        // //糖尿病下次随访时间
        nextFollowTimeDiabetes: "",
        remark: "",
      },
      rules4: {
        systolicPressure: [
          { required: false, validator: validateNum250, trigger: "blur" },
        ],
        diastolicPressure: [
          { required: false, validator: validateNum140, trigger: "blur" },
        ],
        heartRate: [
          { required: false, validator: validateNum219, trigger: "blur" },
        ],
        fastingBloodGlucose: [{ validator: validateNum43, trigger: "blur" }],
        randomBloodGlucose: [{ validator: validateNum43, trigger: "blur" }],
        referralReason: [{ validator: validture1, trigger: "blur" }],
        referralInstitution: [{ validator: validture1, trigger: "blur" }],
        // classFollowHypertension: [
        //   { required: true, message: "至少选一个", trigger: "change" },
        // ],
        // classFollowDiabetes: [
        //   { required: true, message: "至少选一个", trigger: "change" },
        // ],
        // hypoglycemicReactions: [
        //   { required: true, message: "至少选一个", trigger: "change" },
        // ],
      },
      drugValidateForm: {
        drugs: [
          // {
          //   '药品名称': '青霉素',
          //   '天': '1',
          //   '次': '3',
          //   '用量': '3',
          //   '单位': 'ml',
          // }
        ],
      },
      insulinValidateForm: {
        insulins: [
          // {
          //   '药品名称': '胰岛素',
          //   '天': '1',
          //   '次': '3',
          //   '用量': '3',
          //   '单位': 'ml',
          // }
        ],
      },
      requestData: {},
      showFollowTypeOther: false,
      showSymptomOther: false,
      showSymptomsDiabetesOther: false,
      // restaurants: [],
      timeout: null,
    };
  },
  props: {
    tab: String,
  },
  // mounted() {
  //   if (!localStorage.getItem("username")) {
  //     window.location.href = "/login";
  //   }
  //   // http.post('/drug/list', {drupName: '', page: 1, size: 10}).then(res => {
  //   //   // console.log(res)
  //   // })
  // },
  watch: {
    "$route.query": {
      handler(newval) {
    const cardNumber = crypto.Decrypt(this.$route.query.cardNumber);
    if (cardNumber) {
      this.ruleForm.cardNumber = cardNumber;
      this.fetchData();
    }
    
      },
    },
    getform: {
      handler: function () {
        if (
          this.ruleForm.gender &&
          this.ruleForm.birthday &&
          this.ruleForm.contactsName &&
          this.ruleForm.address &&
          this.ruleForm.domicileAddress
        ) {
          setTimeout(() => {
            this.$refs.ruleForm1.validate((valid) => {
              // console.log(valid);
            });
          }, 500);
          //  if(this.ruleForm.cardNumber){
          //   this.ruleForm.cardNumber=this.ruleForm.cardNumber.replace(/\s|\t/g, '');
          //  }
        }
      },
    },
    getform4: {
      handler: debounce(function () {
        //控制血压满意度
        if (this.age >= 65) {
          if (
            this.ruleForm4.systolicPressure >= 150 ||
            this.ruleForm4.diastolicPressure >= 90
          ) {
            // this.ruleForm4.classFollowHypertension.push("控制不满意");

            this.ruleForm4.classFollowHypertension = "控制不满意";
            //       this.ruleForm4.classFollowHypertension = this.ruleForm4.classFollowHypertension.filter(
            //   (item) => item !== "控制满意"
            // );
          }
        } else if (this.age < 65) {
          if (
            this.ruleForm4.systolicPressure >= 140 ||
            this.ruleForm4.diastolicPressure >= 90
          ) {
            // this.ruleForm4.classFollowHypertension.push("控制不满意");

            this.ruleForm4.classFollowHypertension = "控制不满意";
            //       this.ruleForm4.classFollowHypertension = this.ruleForm4.classFollowHypertension.filter(
            //   (item) => item !== "控制满意"
            // );
          }
        } else {
          // this.ruleForm4.classFollowHypertension = ["控制满意"];
          this.ruleForm4.classFollowHypertension = "控制满意";
        }
        // 控制血糖满意度

        if (
          this.ruleForm4.fastingBloodGlucose >= 7.0 ||
          this.ruleForm4.randomBloodGlucose >= 10.0
        ) {
          this.ruleForm4.classFollowDiabetes = "控制不满意";
          //     this.ruleForm4.classFollowDiabetes = this.ruleForm4.classFollowDiabetes.filter(
          //   (item) => item !== "控制满意"
          // );
        }
        //心率

        if (this.dTobj == "高血压") {
          if (this.ruleForm4.classFollowHypertension == "控制不满意") {
            this.ruleForm4.nextFollowTimeHypertension =
              this.calculateFutureDate(14);
          } else if (this.ruleForm4.classFollowHypertension == "控制满意") {
            this.ruleForm4.nextFollowTimeHypertension =
              this.calculateFutureDate(3);
          }
        } else if (this.dTobj == "糖尿病") {
          if (this.ruleForm4.classFollowDiabetes == "控制不满意") {
            this.ruleForm4.nextFollowTimeDiabetes =
              this.calculateFutureDate(14);
          } else if (this.ruleForm4.classFollowDiabetes == "控制满意") {
            this.ruleForm4.nextFollowTimeDiabetes = this.calculateFutureDate(3);
          } else {
            this.ruleForm4.nextFollowTimeDiabetes = this.calculateFutureDate(3);
          }
        } else if (this.dTobj == "高糖") {
          if (this.ruleForm4.classFollowDiabetes == "控制不满意") {
            this.ruleForm4.nextFollowTimeDiabetes =
              this.calculateFutureDate(14);
          }
          if (this.ruleForm4.classFollowDiabetes == "控制满意") {
            this.ruleForm4.nextFollowTimeDiabetes = this.calculateFutureDate(3);
          }

          if (this.ruleForm4.classFollowHypertension == "控制不满意") {
            this.ruleForm4.nextFollowTimeHypertension =
              this.calculateFutureDate(14);
          }
          if (this.ruleForm4.classFollowHypertension == "控制满意") {
            this.ruleForm4.nextFollowTimeHypertension =
              this.calculateFutureDate(3);
          }
        } else {
          this.ruleForm4.nextFollowTimeHypertension =
            this.calculateFutureDate(3);
          this.ruleForm4.nextFollowTimeDiabetes = this.calculateFutureDate(3);
        }
      }),
    },

    // 11  监听多个属性
    watchC: {
      immediate: true,
      handler: function () {
        if (!this.ruleForm3.motion_time1) {
          this.ruleForm3.motion_time1 = "5";
        }
        if (!this.ruleForm3.motion_min1) {
          this.ruleForm3.motion_min1 = "30";
        }
        if (!this.ruleForm3.dailySmoking1) {
          this.ruleForm3.dailySmoking1 = "0";
        }
        if (!this.ruleForm3.dailyDrink1) {
          this.ruleForm3.dailyDrink1 = "0";
        }
        if (!this.ruleForm3.targetMotion_time1) {
          this.ruleForm3.targetMotion_time1 = "5";
        }
        if (!this.ruleForm3.targetMotion_min1) {
          this.ruleForm3.targetMotion_min1 = "30";
        }
        if (!this.ruleForm3.targetStapleFood1) {
          this.ruleForm3.targetStapleFood1 = "350";
        }
        if (!this.ruleForm3.targetSmoking1) {
          this.ruleForm3.targetSmoking1 = "0";
        }
        if (!this.ruleForm3.targetDrink1) {
          this.ruleForm3.targetDrink1 = "0";
        }
        if (!this.ruleForm3.stapleFood1) {
          this.ruleForm3.stapleFood1 = "350";
        }

        if (this.ruleForm3.dailyExerciseFrequency == "0") {
          this.ruleForm3.dailyExerciseTime = "0";
        }
        if (this.ruleForm3.targetExerciseFrequency == "0") {
          this.ruleForm3.targetExerciseTime = "0";
        }
        if (
          this.ruleForm3.dailySmoking > "0" ||
          this.ruleForm3.dailyDrink > "0"
        ) {
          this.ruleForm3.complianceBehavior = "一般";
          return;
        }
        if (
          this.ruleForm3.dailyExerciseFrequency < "5" ||
          this.ruleForm3.dailyExerciseTime < "30"
        ) {
          this.ruleForm3.complianceBehavior = "一般";
          return;
        }
        if (
          this.ruleForm3.dailyExerciseTime <
            this.ruleForm3.targetExerciseFrequency ||
          this.ruleForm3.targetExerciseTime <
            this.ruleForm3.dailyExerciseFrequency ||
          this.ruleForm3.motion_min1 < this.ruleForm3.targetMotion_min1 ||
          this.ruleForm3.motion_time1 < this.ruleForm3.targetMotion_time1
        ) {
          this.ruleForm3.complianceBehavior = "一般";
          return;
        }

        this.ruleForm3.complianceBehavior = "良好";
      },
    },
    bbmi: {
      handler: function () {
        if (
          (this.ruleForm.gender == "男" && this.ruleForm2.other >= 90) ||
          (this.ruleForm.gender == "女" && this.ruleForm2.other >= 85) ||
          this.bbmi > 24 ||
          this.ruleForm2.other >= 90
        ) {
          this.ruleForm3.targetStapleFood = 250;
        }
        if (this.bbmi < 18.5) {
          this.ruleForm3.targetStapleFood = 350;
        }
        if (18.5 <= this.bbmi && this.bbmi <= 24 && this.ruleForm2.other < 85) {
          this.ruleForm3.targetStapleFood = 300;
        }
      },
    },
    iszzz: {
      handler: function () {
        if (
          this.iszz.iszz1 ||
          this.iszz.iszz2 ||
          this.iszz.iszz3 ||
          this.iszz.iszz4 ||
          this.iszz.iszz5 ||
          this.iszz.iszz6
        ) {
          this.ruleForm4.isreferral = true;
        } else {
          this.ruleForm4.isreferral = false;
        }
      },
    },
    getTDobj: {
      handler: function () {
        if (this.dTobj1) {
          console.log("执行了");

          switch (this.dTobj1) {
            case "高血压":
              this.ruleForm2.issymptom = true;
              this.ruleForm2.issymptomsDiabetes = false;
              this.ruleForm4.nextFollowTimeHypertension =
                this.calculateFutureDate(3);

              break;
            case "糖尿病":
              this.ruleForm2.issymptom = false;
              this.ruleForm2.issymptomsDiabetes = true;
              this.ruleForm4.nextFollowTimeDiabetes =
                this.calculateFutureDate(3);

              break;
            case "高糖":
              this.ruleForm2.issymptom = true;
              this.ruleForm2.issymptomsDiabetes = true;
              this.ruleForm4.nextFollowTimeHypertension =
                this.calculateFutureDate(3);

              this.ruleForm4.nextFollowTimeDiabetes =
                this.calculateFutureDate(3);
              break;
          }
        }
      },
    },

    getdt: {
      handler: function () {
        // if(this.ruleForm2.diaeaseType){
        //   this.dTobj=this.ruleForm2.diaeaseType;
        // }
        if (this.ruleForm2.arteryPulsation !== "触及正常") {
          this.$message({
            type: "error",
            message: "足背动脉搏动减弱或消失，需紧急转诊",
          });
          this.iszz.iszz6 = true;
        } else {
          this.iszz.iszz6 = false;
        }
        if (
          this.ruleForm2.other >= 90 ||
          (this.ruleForm.gender == "男" && this.ruleForm2.other >= 90) ||
          (this.ruleForm.gender == "女" && this.ruleForm2.other >= 85)
        ) {
          if (
            this.ruleForm2.targetWeight &&
            this.ruleForm2.targetWeight == this.ruleForm2.weight
          ) {
            this.ruleForm2.targetWeight = this.ruleForm2.weight * 0.95;
          }
        } else {
          if (this.ruleForm2.weight && this.ruleForm2.height) {
            const bmi = (
              (this.ruleForm2.weight /
                (this.ruleForm2.height * this.ruleForm2.height)) *
              10000
            ).toFixed(2);
            //@ts-ignore
            if (bmi >= 24) {
              this.ruleForm2.targetWeight =
                Math.round(this.ruleForm2.weight * 9.5) / 10;
              //@ts-ignore
            } else if (bmi < 18.5) {
              this.ruleForm2.targetWeight =
                Math.round(this.ruleForm2.weight * 10.5) / 10;
            } else {
              this.ruleForm2.targetWeight = this.ruleForm2.weight;
            }
          }
        }
        if (this.ruleForm2.issymptom && !this.ruleForm2.issymptomsDiabetes) {
          this.dTobj = "高血压";
          this.ruleForm4.classFollowDiabetes = "";
          this.ruleForm4.classFollowHypertension = "控制满意";
          this.tnb = false;
          this.ruleForm4.nextFollowTimeHypertension =
            this.calculateFutureDate(3);
        }
        if (this.ruleForm2.issymptomsDiabetes && !this.ruleForm2.issymptom) {
          this.dTobj = "糖尿病";
          this.ruleForm4.classFollowHypertension = "控制满意";
          this.gxy = false;
          this.ruleForm4.classFollowDiabetes = "控制满意";
          this.ruleForm4.nextFollowTimeDiabetes = this.calculateFutureDate(3);
        }

        if (this.ruleForm2.issymptom && this.ruleForm2.issymptomsDiabetes) {
          this.dTobj = "高糖";
          this.ruleForm4.classFollowDiabetes = "控制满意";
          this.ruleForm4.classFollowHypertension = "控制满意";
          this.gxy = true;
          this.tnb = true;
          // if(!this.ruleForm4.randomBloodGlucose ||!this.ruleForm4.fastingBloodGlucose){

          //     this.tabName = "4";
          //         ElMessage.warning("空腹血糖和随机血糖至少填写一个");
          //       this.$emit("children", "4");
          //       document.getElementById("sumize").scrollIntoView();
          //       return false;
          // }
        }
        if (!this.ruleForm2.issymptom && !this.ruleForm2.issymptomsDiabetes) {
          this.dTobj = "";
          this.ruleForm4.classFollowDiabetes = "控制满意";
          this.ruleForm4.classFollowHypertension = "控制满意";
          this.gxy = true;
          this.tnb = true;
        }
        if (
          (this.ruleForm.gender == "男" && this.ruleForm2.other >= 90) ||
          (this.ruleForm.gender == "女" && this.ruleForm2.other >= 85) ||
          this.bbmi > 24
        ) {
          this.ruleForm3.targetStapleFood = 250;
        }
        if (!this.ruleForm2.height && !this.ruleForm2.heightpl) {
          this.ruleForm2.heightpl = "请输入身高";
        }
        if (!this.ruleForm2.weight && !this.ruleForm2.weightpl) {
          this.ruleForm2.weightpl = "请输入体重";
        }
        if (!this.ruleForm2.other && !this.ruleForm2.otherpl) {
          this.ruleForm2.otherpl = "请输入腰围";
        }
        if (!this.ruleForm2.height || this.ruleForm2.height > 250) {
          this.ruleForm2.heightShow = false;
        }
        if (!this.ruleForm2.weight || this.ruleForm2.weight > 300) {
          this.ruleForm2.weightShow = false;
        }
        if (!this.ruleForm2.other || this.ruleForm2.other > 300) {
          this.ruleForm2.otherShow = false;
        }
      },
    },
  },
  computed: {
    // datatime() {
    //   let currentDate = new Date();
    //   // 获取年、月和日
    //   let year = currentDate?.getFullYear();
    //   let month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
    //   let day = String(currentDate.getDate()).padStart(2, "0");
    //   // 组合成 YYYY-MM-DD 格式的字符串
    //   let formattedDate = `${year}-${month}-${day}`;
    //   return formattedDate;
    // },
    issee() {
      if (this.ruleForm2.issymptom && this.ruleForm2.issymptomsDiabetes) {
        return true;
      } else {
        return false;
      }
    },
    // 年龄
    age() {
      const i = this.ruleForm.birthday.split("-")[0];
      //@ts-ignore
      return new Date().getFullYear() + "" - i;
    },
    getFollowWay() {
      if (this.ruleForm.followWay !== "门诊") {
        return true;
      } else {
        return false;
      }
    },
    getform() {
      const { gender, name, phoneNumber, cardNumber, birthday } = this.ruleForm;
      return {
        gender,
        name,
        phoneNumber,
        cardNumber,
        birthday,
      };
    },
    getdt() {
      const {
        issymptom,
        issymptomsDiabetes,
        arteryPulsation,
        other,
        heightpl,
        weightpl,
        otherpl,
        height,
        weight,
        diaeaseType,
      } = this.ruleForm2;
      return {
        issymptom,
        issymptomsDiabetes,
        arteryPulsation,
        other,
        heightpl,
        weightpl,
        otherpl,
        diaeaseType,
        height,
        weight,
      };
    },

    watchC() {
      const {
        dailySmoking,
        dailyDrink,
        dailyExerciseFrequency,
        targetExerciseTime,
        dailyExerciseTime,
        targetExerciseFrequency,
        stapleFood,
        dailySmoking1,
        targetMotion_time1,
        targetMotion_min1,
        targetStapleFood1,
        targetSmoking1,
        targetDrink1,
        stapleFood1,
      } = this.ruleForm3;

      return {
        dailySmoking,
        dailyDrink,
        dailyExerciseFrequency,
        targetExerciseTime,
        dailyExerciseTime,
        targetExerciseFrequency,
        stapleFood,
        dailySmoking1,
        targetMotion_time1,
        targetMotion_min1,
        targetStapleFood1,
        targetSmoking1,
        targetDrink1,
        stapleFood1,
      };
    },

    bbmi() {
      let bmi = (
        (this.ruleForm2.weight /
          (this.ruleForm2.height * this.ruleForm2.height)) *
        10000
      ).toFixed(2);
      if (bmi) {
        return bmi;
      } else {
        return 0;
      }
    },
    getform4() {
      const {
        systolicPressure,
        diastolicPressure,
        randomBloodGlucose,
        fastingBloodGlucose,
        classFollowHypertension,
        classFollowDiabetes,
        // hypoglycemicReactions,
        followTime,
        heartRate,
      } = this.ruleForm4;
      return {
        systolicPressure,
        diastolicPressure,
        randomBloodGlucose,
        fastingBloodGlucose,
        followTime,
        classFollowHypertension,
        classFollowDiabetes,
        heartRate,
        // hypoglycemicReactions,
      };
    },
    iszzz() {
      const { iszz1, iszz2, iszz3, iszz4, iszz5, iszz6 } = this.iszz;
      return {
        iszz1,
        iszz2,
        iszz3,
        iszz4,
        iszz5,
        iszz6,
      };
    },
    getTDobj() {
      return this.dTobj1;
    },
  },
  methods: {
    disableFutureDates,
    disableNextDates,

    // disableNextTiem(time){

    //   return this.ruleForm4.followTime < new Date()
    // },
    disableNextTiem(time) {
      // 获取当前时间
      const currentDate = new Date();

      // 获取 followTime 并转换为 Date 对象（假设 followTime 是字符串或时间戳）
      const followTime = new Date(this.ruleForm4.followTime);

      // 计算 followTime 后 4 个月的时间
      const maxDate = new Date(followTime);
      maxDate.setMonth(followTime.getMonth() + 4); // 设置为 followTime 后 4 个月

      // 判断是否选择的时间在 followTime 和 maxDate 之间
      return time < followTime || time > maxDate;
    },
    formatDateToYYYYMMDD(date) {
      const year = date.getFullYear();
      //@ts-ignore
      const month = String(date.getMonth() + 1).padStart(2, "0");
      //@ts-ignore
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    handleClick(e: MouseEvent) {
      e.preventDefault();
    },
    handleChange(val) {
      // console.log(val, this.dTobj1, this.dTobj);
      if (this.dTobj1 && this.dTobj != this.dTobj1) {
        this.$confirm(`居民历史病种为${this.dTobj1}，是否确定修改`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.ruleForm2.issymptom = val;
            // console.log(this.dTobj);
          })
          .catch(() => {
            this.ruleForm2.issymptom = !val;
          });
      }
    },
    handleChange1(val) {
      // console.log(val, this.dTobj1, this.dTobj);
      if (this.dTobj1 && this.dTobj != this.dTobj1) {
        this.$confirm(`居民历史病种为${this.dTobj1}，是否确定修改`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.ruleForm2.issymptomsDiabetes = val;
          })
          .catch(() => {
            this.ruleForm2.issymptomsDiabetes = !val;
          });
      }
    },
    calculateFutureDate(days) {
      const currentDate = new Date(this.ruleForm4.followTime);
      const futureDate = new Date(
        currentDate.getTime() + days * 24 * 60 * 60 * 1000
      );

      if (days == 3) {
        currentDate.setMonth(currentDate.getMonth() + days);
        console.log(currentDate.toISOString().split("T")[0]);
        return currentDate.toISOString().split("T")[0]; // 返回形如 'YYYY-MM-DD' 的字符串
      } else {
        console.log(futureDate.toISOString().split("T")[0]);
        return futureDate.toISOString().split("T")[0]; // 返回形如'YYYY-MM-DD'的字符串
      }
    },

    NextInput(key, index?) {
      console.log(key);

      if (key === "select") {
        if (this.showFollowTypeOther) {
          return this.$refs.followTypeOtherInput.focus();
        }
        if (this.showSymptomOther && this.ruleForm2.issymptom) {
          return this.$refs.symptomOtherInput.focus();
        }
        if (
          this.showSymptomsDiabetesOther &&
          this.ruleForm2.issymptomsDiabetes
        ) {
          return this.$refs.symptomsDiabetesOtherInput.focus();
        } else {
          return this.$refs.heightInput.focus();
        }
      }
      if (key === "select2") {
        if (this.showSymptomOther && this.ruleForm2.issymptom) {
          return this.$refs.symptomOtherInput.focus();
        }
        if (
          this.showSymptomsDiabetesOther &&
          this.ruleForm2.issymptomsDiabetes
        ) {
          return this.$refs.symptomsDiabetesOtherInput.focus();
        } else {
          return this.$refs.heightInput.focus();
        }
      }
      if (key === "select3") {
        if (
          this.showSymptomsDiabetesOther &&
          this.ruleForm2.issymptomsDiabetes
        ) {
          return this.$refs.symptomsDiabetesOtherInput.focus();
        } else {
          return this.$refs.heightInput.focus();
        }
      }
      if (key === "select4") {
        if (this.tnb) {
          return this.$refs.fastingBloodGlucoseInput.focus();
        }
        if (this.gxy && this.ruleForm4.isreferral) {
          return this.$refs.referralInput.focus();
        }
        // else{
        //   return this.$refs.heightInput.focus();
        // }

        if (this.gxy && this.tnb == false) {
          return this.$refs.followTimePickerInput.focus();
        }
        if (this.ruleForm4.isreferral) {
          return this.$refs.referralInput.focus();
        } else {
          return this.$refs.drugInput.focus();
        }
      }
      if (key === "stapleFoodInput") {
        if (this.gxy && this.tnb == false) {
          return this.$refs.heartRateInput.focus();
        }
      }
      if (key === "stapleFoodInput") {
        if (this.gxy && this.tnb == false) {
          return this.$refs.heartRateInput.focus();
        }
      }
      if (key === "contactsInput") {
        // this.$refs.birthDateInput.hidePicker();
      }
      if (key === "followTimePickerInput") {
      }

      if (this.$refs[key] && typeof this.$refs[key].focus === "function") {
        return this.$refs[key].focus();
      }
      if (
        this.insulinValidateForm.insulins.length == index + 1 &&
        key === "insulinNameInput"
      ) {
        return this.$refs.followTimePickerInput.focus();
      }
      if (
        key === "drugInput" &&
        this.drugValidateForm.drugs.length > 0 &&
        !index
      ) {
        return this.$refs.drugInput[0].focus();
      }
      if (this.insulinValidateForm.insulins.length > 0 && key === "drugInput") {
        if (this.drugValidateForm.drugs.length == index + 1) {
          return this.$refs.insulinNameInput[0].focus();
        } else {
          return this.$refs.followTimePickerInput.focus();
        }
      }
      if (index >= 0) {
        return this.$refs[key][index].focus();
      } else {
        return this.$refs.followTimePickerInput.focus();
      }
    },
    birthDateBlur() {
      console.log(1111);
    },
    resetForm() {
      this.$confirm("是否要清空填报内容", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          (this.showCardNumber = ""),
            (this.showName = ""),
            (this.ruleForm4.followTime = this.formatDateToYYYYMMDD(new Date()));
          this.$refs.ruleForm1.resetFields();
          this.$refs.ruleForm2.resetFields();
          this.$refs.ruleForm3.resetFields();
          this.$refs.Form4.resetFields();
          this.$refs.drugValidateForm.resetFields();
          this.$refs.insulinValidateForm.resetFields();
          this.formDate = {};
          this.formDate1 = {};
          //病种控制
          this.dTobj1 = "";
          this.ruleForm2.heightpl = "请输入身高";
          this.ruleForm2.weightpl = "请输入体重";
          this.ruleForm2.otherpl = "请输入腰围";
          this.ruleForm2.diaeaseType = "";
          this.ruleForm2.heightmsg = "";
          this.ruleForm2.weightmsg = "";
          this.ruleForm2.othermsg = "";
          this.ruleForm2.heightShow = false;
          this.ruleForm2.weightShow = false;
          this.ruleForm2.otherShow = false;

          (this.ruleForm3.stapleFood = ""),
            (this.ruleForm3.stapleFood1 = "350"),
            (this.ruleForm3.dailySmoking1 = "0"),
            (this.ruleForm3.dailyDrink1 = "0"),
            (this.ruleForm3.targetMotion_time1 = "5"),
            (this.ruleForm3.targetMotion_min1 = "30"),
            (this.ruleForm3.targetStapleFood1 = "350"),
            (this.ruleForm3.targetSmoking1 = "0"),
            (this.ruleForm3.targetDrink1 = "0"),
            (this.ruleForm3.motion_time1 = "5"),
            (this.ruleForm3.motion_min1 = "30"),
            (this.ruleForm4.nextFollowTime = "");
          document.querySelector(".containerbox").scrollTop = 0;
          this.ruleForm.cardNumber = "";
          this.$router.replace({
            path: this.$route.path, // 保持当前路径
            query: {}, // 清空查询参数
          });
        })
        .catch(() => {
          return false;
        });
    },
    //心率
    debouncedCalcTargetHeartRate: debounce(function () {
      if (this.ruleForm4.heartRate > 100) {
        this.iszz.iszz5 = true;
        this.$message({
          type: "error",
          message: "心动过速，需紧急转诊",
        });
      } else {
        this.iszz.iszz5 = false;
      }
    }, 500),
    // 收缩压
    debounceFunction: debounce(function () {
      this.$refs.Form4.validateField("diastolicPressure");
      if (this.age >= 65) {
        if (
          this.ruleForm4.systolicPressure >= 150 &&
          this.ruleForm4.systolicPressure < 180
        ) {
          // this.iszz.iszz1=true
          this.$message({
            type: "error",
            message: "血压过高，请及时转诊",
          });
        }
      } else if (this.age < 65) {
        if (
          this.ruleForm4.systolicPressure >= 140 &&
          this.ruleForm4.systolicPressure < 180
        ) {
          // this.iszz.iszz1=true
          this.$message({
            type: "error",
            message: "血压过高，请及时转诊",
          });
        }
      } else {
        this.iszz.iszz1 = false;
        // this.ruleForm4.classFollowHypertension = ["控制满意"];
        this.ruleForm4.classFollowHypertension = "控制满意";
      }

      if (this.ruleForm4.systolicPressure >= 180) {
        this.iszz.iszz1 = true;
        this.$message({
          type: "error",
          message: "血压过高，需紧急转诊",
        });
        this.ruleForm4.classFollowDiabetes = "控制不满意";
      } else if (
        this.ruleForm4.systolicPressure >= 30 &&
        this.ruleForm4.systolicPressure < 90
      ) {
        this.iszz.iszz1 = false;
        this.ruleForm4.classFollowHypertension = "控制不满意";
      } else {
        this.iszz.iszz1 = false;
        // this.ruleForm4.classFollowHypertension = ["控制满意"];
        this.ruleForm4.classFollowHypertension = "控制满意";
        if (this.ruleForm4.diastolicPressure < 110) {
          this.ruleForm4.classFollowDiabetes = "控制满意";
        }
      }
    }, 500),
    // 舒张压
    debounceFunction2: debounce(function () {
      // that.$refs.
      this.$refs.Form4.validateField("systolicPressure");
      if (this.ruleForm4.diastolicPressure >= 110) {
        this.iszz.iszz2 = true;
        this.$message({
          type: "error",
          message: "血压过高，需紧急转诊",
        });
        this.ruleForm4.classFollowDiabetes = "控制不满意";
      } else if (
        this.ruleForm4.diastolicPressure >= 30 &&
        this.ruleForm4.diastolicPressure < 60
      ) {
        this.ruleForm4.classFollowHypertension = "控制不满意";
      } else if (this.age >= 65) {
        if (
          this.ruleForm4.diastolicPressure >= 90 &&
          this.ruleForm4.diastolicPressure < 110
        ) {
          // this.iszz.iszz2=true

          this.$message({
            type: "error",
            message: "血压过高，请及时转诊",
          });
        } else {
          this.iszz.iszz2 = false;
          // this.ruleForm4.classFollowHypertension = ["控制满意"];
          this.ruleForm4.classFollowHypertension = "控制满意";
          this.ruleForm4.classFollowDiabetes = "控制满意";
        }
      } else if (this.age < 65) {
        if (
          this.ruleForm4.diastolicPressure >= 90 &&
          this.ruleForm4.diastolicPressure < 110
        ) {
          // this.iszz.iszz2=true

          this.$message({
            type: "error",
            message: "血压过高，请及时转诊",
          });
        } else {
          this.iszz.iszz2 = false;
          // this.ruleForm4.classFollowHypertension = ["控制满意"];
          this.ruleForm4.classFollowHypertension = "控制满意";
        }
      } else {
        this.iszz.iszz2 = false;
        // this.ruleForm4.classFollowHypertension = ["控制满意"];
        this.ruleForm4.classFollowHypertension = "控制满意";
      }
      // if(this.ruleForm4.diastolicPressure>=30||this.ruleForm4.diastolicPressure<60){
      //   this.ruleForm4.classFollowHypertension = "控制不满意";
      // }else{
      //   this.ruleForm4.classFollowHypertension = "控制满意";
      // }
    }, 500),
    // 随机血糖
    debounceFunction3: debounce(function () {
      if (this.ruleForm4.randomBloodGlucose != "") {
        if (this.ruleForm4.randomBloodGlucose >= 16.7) {
          this.iszz.iszz3 = true;
          this.$message({
            type: "error",
            message: "血糖过高，需紧急转诊",
          });
        } else if (this.ruleForm4.randomBloodGlucose <= 3.9) {
          this.iszz.iszz3 = true;
          this.$message({
            type: "error",
            message: "血糖过低，需紧急转诊",
          });
        } else if (
          this.ruleForm4.randomBloodGlucose >= 10 &&
          this.ruleForm4.randomBloodGlucose < 16.7
        ) {
          this.iszz.iszz3 = false;
          this.$message({
            type: "error",
            message: "血糖过高，请及时转诊",
          });
        } else {
          this.iszz.iszz3 = false;
          this.ruleForm4.classFollowDiabetes = "控制满意";
        }
      } else {
        this.iszz.iszz3 = false;
        this.ruleForm4.classFollowDiabetes = "控制满意";
      }
    }, 500),
    //空腹血糖
    debounceFunction4: debounce(function () {
      if (this.ruleForm4.fastingBloodGlucose != "") {
        if (this.ruleForm4.fastingBloodGlucose <= 3.9) {
          this.iszz.iszz4 = true;
          this.ruleForm4.classFollowDiabetes = "控制不满意";
          this.$message({
            type: "error",
            message: "血糖过低，需紧急转诊",
          });
        } else if (
          this.ruleForm4.fastingBloodGlucose >= 7.0 &&
          this.ruleForm4.fastingBloodGlucose < 16.7
        ) {
          this.iszz.iszz4 = false;
          this.ruleForm4.classFollowDiabetes = "控制不满意";
          this.$message({
            type: "error",
            message: "血糖过高，请及时转诊",
          });
        } else if (this.ruleForm4.fastingBloodGlucose >= 16.7) {
          this.iszz.iszz4 = true;
          this.ruleForm4.classFollowDiabetes = "控制不满意";
          this.$message({
            type: "error",
            message: "血糖过高，需紧急转诊",
          });
        } else {
          this.iszz.iszz4 = false;
          this.ruleForm4.classFollowDiabetes = "控制满意";
        }
      } else {
        this.iszz.iszz4 = false;
        this.ruleForm4.classFollowDiabetes = "控制满意";
      }
    }, 500),

    // nextTabs() {
    //   this.tabName = this.tabName === '5' ? '1' : (Number(this.tabName) + 1) + ''
    // },
    getBirthDate() {
      if (
        this.ruleForm.cardNumber &&
        this.ruleForm.cardNumber.length === 18 &&
        this.ruleForm.cardType == "居民身份证"
      ) {
        const birthday = this.ruleForm.cardNumber.substring(6, 14);

        // this.ruleForm.birthday =
        //   birthday.substring(0, 4) +
        //   "-" +
        //   birthday.substring(4, 6) +
        //   "-" +
        //   birthday.substring(6, 8);
        const cardNumber = this.ruleForm.cardNumber;

        // 1. 获取出生日期部分 (第7到14位)
        const birthdayPart = cardNumber.substring(6, 14);
        // 正则校验是否为有效日期格式
        const dateRegex = /^(\d{4})(\d{2})(\d{2})$/;
        if (dateRegex.test(birthdayPart)) {
          const [, year, month, day] = birthdayPart.match(dateRegex);

          // 校验日期有效性
          const birthDate = new Date(`${year}-${month}-${day}`);
          if (
            birthDate.getFullYear() === parseInt(year) &&
            birthDate.getMonth() + 1 === parseInt(month) &&
            birthDate.getDate() === parseInt(day)
          ) {
            // 设置出生日期
            this.ruleForm.birthday = `${year}-${month}-${day}`;
          } else {
            this.ruleForm.birthday = ""; // 重置
          }
        } else {
          this.ruleForm.birthday = ""; // 重置
        }

        // 2. 判断性别（第17位：奇数男，偶数女）
        const genderDigit = parseInt(cardNumber.charAt(16), 10);
        if (!isNaN(genderDigit)) {
          this.ruleForm.gender = genderDigit % 2 === 0 ? "女" : "男";
        } else {
          this.ruleForm.gender = ""; // 重置
        }
      }
    },
    followTypeChange(val) {
      if (val === "其他") {
        this.showFollowTypeOther = true;
      } else {
        this.showFollowTypeOther = false;
      }
    },
    symptomChange(val) {
      if (val.includes("其他")) {
        this.showSymptomOther = true;
      } else {
        this.showSymptomOther = false;
      }
      // if (val.includes("无症状")) {
      //   this.showSymptomOther = false;
      //   this.ruleForm2.symptomHypertension = ["无症状"];
      // }
    },
    symptomChange1() {
      this.ruleForm2.symptomHypertension = ["无症状"];
    },

    syChange() {
      this.ruleForm2.symptomHypertension =
        this.ruleForm2.symptomHypertension.filter((item) => item !== "无症状");
    },
    symptoChange() {
      this.ruleForm2.symptomsDiabetes = ["无症状"];
    },
    syChange1(value) {
      console.log(this.ruleForm2.symptomsDiabetes);

      this.ruleForm2.symptomsDiabetes = this.ruleForm2.symptomsDiabetes.filter(
        (item) => item !== "无症状"
      );
    },
    syChange2(value) {
      this.ruleForm2.arteryPulsation = this.ruleForm2.arteryPulsation.filter(
        (item) => item !== "触及正常"
      );
    },
    syChange3(value) {
      this.ruleForm2.arteryPulsation = ["触及正常"];
    },
    // syChange4(value) {
    //   if (value.includes("控制满意")) {
    //     this.ruleForm4.classFollowHypertension=["控制满意"];

    //   }
    // },
    // syChange5(value) {
    //   this.ruleForm4.classFollowHypertension = this.ruleForm4.classFollowHypertension.filter(
    //     (item) => item !== "控制满意"
    //   );
    // },
    // syChange6(value) {
    //   if (value.includes("控制满意")) {

    //     this.ruleForm4.classFollowDiabetes="控制满意";
    //   }
    // },
    // syChange7(value) {
    //   this.ruleForm4.classFollowDiabetes = this.ruleForm4.classFollowDiabetes.filter(
    //     (item) => item !== "控制满意"
    //   );
    // },
    symptomsDiabetesChange(val) {
      if (val.includes("其他")) {
        this.showSymptomsDiabetesOther = true;
      } else {
        this.showSymptomsDiabetesOther = false;
      }
      // if (val.includes("无症状")) {
      //   this.showSymptomsDiabetesOther = false;
      //   this.ruleForm2.symptomsDiabetes = ["无症状"];
      // }
    },

    calcTargetWeight() {
      if (this.ruleForm2.weight && this.ruleForm2.height) {
        const bmi = (
          (this.ruleForm2.weight /
            (this.ruleForm2.height * this.ruleForm2.height)) *
          10000
        ).toFixed(2);
        //@ts-ignore
        if (bmi >= 24) {
          this.ruleForm2.targetWeight =
            Math.round(this.ruleForm2.weight * 9.5) / 10;
          //@ts-ignore
        } else if (bmi < 18.5) {
          this.ruleForm2.targetWeight =
            Math.round(this.ruleForm2.weight * 10.5) / 10;
        } else {
          this.ruleForm2.targetWeight = this.ruleForm2.weight;
        }
      }
      if (this.ruleForm2.weight.trim()) {
        if (
          /^(?=[0-9]*\.[0-9]?|[1-9][0-9]*\.?[0-9]?)\d*\.?\d{0,1}$/.test(
            this.ruleForm2.weight
          ) &&
          this.ruleForm2.weight.trim() >= 20 &&
          this.ruleForm2.weight.trim() <= 300
        ) {
          if (
            this.ruleForm2.weightpl &&
            this.ruleForm2.weightpl !== "请输入体重"
          ) {
            let weightCM = Math.abs(
              this.ruleForm2.weightpl - this.ruleForm2.weight
            ).toFixed(2);
            let weightpl = this.ruleForm2.weightpl;
            let weight = this.ruleForm2.weight;
            this.ruleForm2.weightShow = true;
            this.ruleForm2.weightmsg = `上次体重为${weightpl}kg，本次体重为${weight}kg，差距为${weightCM}kg`;
          } else {
            this.ruleForm2.weightShow = false;
          }
        } else {
          this.ruleForm2.weightShow = false;
        }
      }
    },
    calcTargetHeight() {
      if (this.ruleForm2.weight && this.ruleForm2.height) {
        const bmi = (
          (this.ruleForm2.weight /
            (this.ruleForm2.height * this.ruleForm2.height)) *
          10000
        ).toFixed(2);
        //@ts-ignore
        if (bmi >= 24) {
          this.ruleForm2.targetWeight =
            Math.round(this.ruleForm2.weight * 9.5) / 10;
          //@ts-ignore
        } else if (bmi < 18.5) {
          this.ruleForm2.targetWeight =
            Math.round(this.ruleForm2.weight * 10.5) / 10;
        } else {
          this.ruleForm2.targetWeight = this.ruleForm2.weight;
        }
      }
      if (this.ruleForm2.height.trim()) {
        if (
          /^(?=[0-9]*\.[0-9]?|[1-9][0-9]*\.?[0-9]?)\d*\.?\d{0,1}$/.test(
            this.ruleForm2.height.trim()
          ) &&
          this.ruleForm2.height.trim() >= 50 &&
          this.ruleForm2.height.trim() <= 250
        ) {
          if (
            this.ruleForm2.heightpl &&
            this.ruleForm2.heightpl !== "请输入身高"
          ) {
            let heightCM = Math.abs(
              this.ruleForm2.heightpl - this.ruleForm2.height
            ).toFixed(2);
            let heightpl = this.ruleForm2.heightpl;
            let height = this.ruleForm2.height;
            this.ruleForm2.heightShow = true;
            this.ruleForm2.heightmsg = `上次身高为${heightpl}cm，本次身高为${height}cm，差距为${heightCM}cm`;
          }
        } else {
          this.ruleForm2.heightShow = false;
        }
      }
    },
    calcTargetOther() {
      if (this.ruleForm2.other.trim()) {
        let value = this.ruleForm2.other.trim();
        if (
          /^(?=[0-9]*\.[0-9]?|[1-9][0-9]*\.?[0-9]?)\d*\.?\d{0,1}$/.test(
            this.ruleForm2.other.trim()
          )
        ) {
          if (this.ruleForm.gender == "男" && value >= 40 && value <= 300) {
            if (
              this.ruleForm2.otherpl &&
              this.ruleForm2.otherpl !== "请输入腰围"
            ) {
              let otherCM = Math.abs(
                this.ruleForm2.otherpl - this.ruleForm2.other
              ).toFixed(2);
              let otherpl = this.ruleForm2.otherpl;
              let other = this.ruleForm2.other;
              this.ruleForm2.otherShow = true;
              this.ruleForm2.othermsg = `上次腰围为${otherpl}，本次腰围为${other}，差距为${otherCM}cm`;
            }
          } else if (
            this.ruleForm.gender == "女" &&
            value >= 35 &&
            value <= 300
          ) {
            if (
              this.ruleForm2.otherpl &&
              this.ruleForm2.otherpl !== "请输入腰围"
            ) {
              let otherCM = Math.abs(
                this.ruleForm2.otherpl - this.ruleForm2.other
              ).toFixed(2);
              console.log(otherCM);
              let otherpl = this.ruleForm2.otherpl;
              let other = this.ruleForm2.other;
              this.ruleForm2.otherShow = true;
              this.ruleForm2.othermsg = `上次腰围为${otherpl}cm，本次腰围为${other}cm，差距为${otherCM}cm`;
            }
          } else {
            this.ruleForm2.otherShow = false;
          }
        } else {
          this.ruleForm2.otherShow = false;
        }
      }
    },
    querySearchAsync(queryString, cb) {
      clearTimeout(this.timeout);
      let results = [];
      if (!queryString || this.showName == queryString) {
        cb(results);
        return;
      } else {
        // 掉接口需要的参数
        this.timeout = setTimeout(() => {
          const find = {
            name: queryString,
          };
          this.dTobj1 = "";
          http
            .post("/followRecord/getResidentInfoForCollect", find)
            .then((res) => {
              //@ts-ignore
              if (res.data.length > 0) {
                this.formDate = {};
                this.formDate1 = {};
                res.data.forEach((v) => {
                  // this.ruleForm2.heightpl = v.height;
                  // this.ruleForm2.weightpl = v.weight;
                  // this.ruleForm2.otherpl = v.waist;
                  // this.dTobj1 = v.diseaseType;
                  // this.ruleForm3.dailyDrink1 = v.dailyDrink;
                  // this.ruleForm3.dailySmoking1 = v.dailySmoking;
                  // this.ruleForm3.stapleFood1 = v.stapleFood;
                  // this.ruleForm3.motion_time1 = v.dailyExerciseFrequency;
                  // this.ruleForm3.motion_min1 = v.dailyExerciseTime;
                  // this.ruleForm3.targetMotion_time1 =
                  //   v.targetExerciseFrequency;
                  // this.ruleForm3.targetMotion_min1 =
                  //   v.targetExerciseTime;
                  // this.ruleForm3.targetStapleFood1 = v.targetStapleFood;
                  // this.ruleForm3.targetSmoking1 = v.targetSmoking;
                  // this.ruleForm3.targetDrink1 = v.targetDrink;
                  // 更新 ruleForm2 和 ruleForm3 的相关属性
                  //@ts-ignore
                  Object.assign(this.formDate, {
                    heightpl: v.height,
                    weightpl: v.weight,
                    otherpl: v.waist,
                    dTobj1: v.diseaseType,
                  });
                  // this.dTobj1 = v.diseaseType;
                  //@ts-ignore
                  Object.assign(this.formDate1, {
                    dailyDrink1: v.dailyDrink,
                    dailySmoking1: v.dailySmoking,
                    stapleFood1: v.stapleFood,
                    motion_time1: v.dailyExerciseFrequency,
                    motion_min1: v.dailyExerciseTime,
                    targetMotion_time1: v.targetExerciseFrequency,
                    targetMotion_min1: v.targetExerciseTime,
                    targetStapleFood1: v.targetStapleFood,
                    targetSmoking1: v.targetSmoking,
                    targetDrink1: v.targetDrink,
                  });
                  results.push({
                    value: v.name + " " + v.cardNumber,
                    name: v.name,
                    gender: v.gender,
                    phoneNumber: v.phoneNumber,
                    cardNumber: v.cardNumber,
                    cardType: v.cardType ? v.cardType : "居民身份证",
                    birthday: v.birthday,
                    contactsName: v.contactsName,
                    contactsPhoneNumber: v.contactsPhoneNumber,
                    address: v.address,
                    domicileAddress: v.domicileAddress,
                  });
                });
                cb(results);
              } else {
                results = [];
                cb(results);
              }
            });
        }, 1000);
      }
    },

    querycardNumberAsync: debounce(function (queryString, cb) {
      let results = [];
      queryString = queryString.trim();
      // 如果输入为空，直接返回空数组
      if (!queryString || this.showCardNumber == queryString) {
        cb(results);
        return;
      }

      // 设置请求参数
      const find = {
        cardNumber: queryString,
      };

      // 发送请求获取数据
      http
        .post("/followRecord/getResidentInfoForCollect", find)
        .then((res) => {
          if (res.data.length > 0) {
            this.formDate = {};
            this.formDate1 = {};
            res.data.forEach((v) => {
              // 更新 ruleForm2 和 ruleForm3 的相关属性

              Object.assign(this.formDate, {
                heightpl: v.height,
                weightpl: v.weight,
                otherpl: v.waist,
                dTobj1: v.diseaseType,
              });
              // this.dTobj1 = v.diseaseType;

              Object.assign(this.formDate1, {
                dailyDrink1: v.dailyDrink,
                dailySmoking1: v.dailySmoking,
                stapleFood1: v.stapleFood,
                motion_time1: v.dailyExerciseFrequency,
                motion_min1: v.dailyExerciseTime,
                targetMotion_time1: v.targetExerciseFrequency,
                targetMotion_min1: v.targetExerciseTime,
                targetStapleFood1: v.targetStapleFood,
                targetSmoking1: v.targetSmoking,
                targetDrink1: v.targetDrink,
              });

              // 将结果推入 results 数组
              results.push({
                value: v.cardNumber + " " + v.name, // 用于显示的值
                name: v.name,
                gender: v.gender,
                phoneNumber: v.phoneNumber,
                cardNumber: v.cardNumber,
                cardType: v.cardType ? v.cardType : "居民身份证",
                birthday: v.birthday,
                contactsName: v.contactsName,
                contactsPhoneNumber: v.contactsPhoneNumber,
                address: v.address,
                domicileAddress: v.domicileAddress,
              });
            });
            cb(results);
          } else {
            cb([]);
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
          cb([]);
        });
    }, 500), // 设置防抖延迟时间为500毫秒

    handleSelect(item) {
      this.ruleForm = { ...this.ruleForm, ...item };
      const data2 = { cardNumber: this.ruleForm.cardNumber };
      this.showCardNumber = this.ruleForm.cardNumber;
      this.showName = this.ruleForm.name;
      http
        .post("/followRecord/checkIfHaveBeenRecently", data2)
        .then((res2) => {
          //@ts-ignore
          if (res2.code == 0) {
            this.dTobj1 = this.formDate.dTobj1;
            //@ts-ignore
            Object.assign(this.ruleForm2, this.formDate);
            Object.assign(this.ruleForm3, this.formDate1);
          }
          //@ts-ignore
          if (res2.code == 1) {
            //@ts-ignore
            this.$confirm(`${res2.message}`, "提示", {
              confirmButtonText: "确认",
              // cancelButtonText:
              //   "取消",
              showCancelButton: false,
              type: "warning",
            })
              .then(() => {
                this.dTobj1 = this.formDate.dTobj1;
                Object.assign(this.ruleForm2, this.formDate);
                Object.assign(this.ruleForm3, this.formDate1);
              })
              .catch((err) => {
                console.log(err);
                return false;
              });
          }
        })
        .catch((err) => {
          console.log(err);
          return false;
        });
    },
    onBack() {
      window.location.href = "/";
    },
    //@ts-ignore
    async onSubmit() {
      const that = this;
      this.$refs.ruleForm1.validate((valid) => {
        if (valid == false) {
          this.tabName = "1";
          this.$emit("children", "1");
          document.getElementById("baseInfo").scrollIntoView();
          return false;
        }
        if (valid) {
          this.$refs.ruleForm2.validate((valid2) => {
            if (valid2 == false) {
              this.tabName = "2";
              this.$emit("children", "2");
              document.getElementById("bing").scrollIntoView();
              return false;
            }
            if (valid2) {
              if (
                !that.ruleForm2.issymptom &&
                !that.ruleForm2.issymptomsDiabetes
              ) {
                this.$emit("children", "2");
                //@ts-ignore
                ElMessage.warning("高血压和糖尿病至少选一样！");
                document.getElementById("bing").scrollIntoView();
                return false;
              }
              if (
                that.ruleForm2.issymptom &&
                !that.ruleForm2.symptomHypertension.length
              ) {
                that.tabName = "2";
                //@ts-ignore
                ElMessage.warning("请选择高血压症状");
                this.$emit("children", "2");
                document.getElementById("bing").scrollIntoView();
                return false;
              }
              if (
                that.ruleForm2.issymptomsDiabetes &&
                !that.ruleForm2.symptomsDiabetes.length
              ) {
                that.tabName = "2";
                this.$emit("children", "2");
                document.getElementById("bing").scrollIntoView();
                //@ts-ignore
                ElMessage.warning("请选择糖尿病症状");
                return false;
              }
              if (
                (this.ruleForm2.weight == "" || this.ruleForm2.height == "") &&
                (this.ruleForm2.weightpl == "请输入体重" ||
                  this.ruleForm2.heightpl == "请输入身高")
              ) {
                this.$message({
                  type: "error",
                  message: `身高体重为必填项`,
                });
                this.tabName = "2";
                this.$emit("children", "2");
                document.getElementById("bing").scrollIntoView();
                return false;
              }
              // 验证并提交表单数据
              this.$refs.ruleForm3.validate((valid) => {
                if (valid == false) {
                  this.tabName = "3";
                  this.$emit("children", "3");
                  document.getElementById("life").scrollIntoView();
                  return false;
                }
                if (valid) {
                  // 验证第二份表单
                  that.$refs.ruleForm2.validate((valid2) => {
                    if (valid2) {
                      // 检查是否选择了高血压或糖尿病症状
                      if (
                        !that.ruleForm2.issymptom &&
                        !that.ruleForm2.issymptomsDiabetes
                      ) {
                        this.$emit("children", "2");
                        ElMessage.warning("高血压和糖尿病至少选一样！");
                        document.getElementById("bing").scrollIntoView();
                        return false;
                      }
                      // 检查是否选择了高血压症状
                      if (
                        that.ruleForm2.issymptom &&
                        !that.ruleForm2.symptomHypertension.length
                      ) {
                        ElMessage.warning("请选择高血压症状");
                        document.getElementById("bing").scrollIntoView();
                        return false;
                      }
                      // 检查是否选择了糖尿病症状
                      if (
                        that.ruleForm2.issymptomsDiabetes &&
                        !that.ruleForm2.symptomsDiabetes.length
                      ) {
                        ElMessage.warning("请选择糖尿病症状");
                        document.getElementById("bing").scrollIntoView();
                        return false;
                      }
                      // that.tabName = "3";
                      // this.$emit("children", "3");
                      // document.getElementById("life").scrollIntoView();
                      // 验证第三份表单
                      that.$refs.ruleForm3.validate((valid3) => {
                        if (valid3) {
                          // 验证第四份表单
                          that.$refs.Form4.validate((valid4) => {
                            if (valid4) {
                              if (
                                that.ruleForm2.issymptomsDiabetes &&
                                !this.ruleForm4.randomBloodGlucose &&
                                !this.ruleForm4.fastingBloodGlucose
                              ) {
                                ElMessage.warning(
                                  "空腹血糖和随机血糖至少填写一个"
                                );
                                document
                                  .getElementById("sumi")
                                  .scrollIntoView();
                                that.tabName = "4";
                                // this.$emit("children", "4");
                                return false;
                              }
                              // 验证药物表单
                              that.$refs.drugValidateForm.validate((valid5) => {
                                if (valid5) {
                                  // 验证胰岛素表单
                                  that.$refs.insulinValidateForm.validate(
                                    (valid6) => {
                                      if (valid6) {
                                        // 确认是否提交全部信息

                                        that
                                          .$confirm(
                                            `当前选择的病种为${this.dTobj},请确定是否录入全部信息`,
                                            "提示",
                                            {
                                              confirmButtonText: "确认",
                                              cancelButtonText: "取消",
                                              type: "warning",
                                            }
                                          )
                                          .then(() => {
                                            if (
                                              this.ruleForm3.dailySmoking == ""
                                            ) {
                                              this.ruleForm3.dailySmoking =
                                                this.ruleForm3.dailySmoking1;
                                            }
                                            if (
                                              this.ruleForm3.dailyDrink == ""
                                            ) {
                                              this.ruleForm3.dailyDrink =
                                                this.ruleForm3.dailyDrink1;
                                            }

                                            if (
                                              this.ruleForm3.targetDrink == ""
                                            ) {
                                              this.ruleForm3.targetDrink =
                                                this.ruleForm3.targetDrink1;
                                            }
                                            if (
                                              this.ruleForm3
                                                .targetExerciseTime == ""
                                            ) {
                                              this.ruleForm3.targetExerciseTime =
                                                this.ruleForm3.targetMotion_min1;
                                            }
                                            if (
                                              this.ruleForm3
                                                .dailyExerciseTime == ""
                                            ) {
                                              this.ruleForm3.dailyExerciseTime =
                                                this.ruleForm3.motion_min1;
                                            }
                                            if (
                                              this.ruleForm3
                                                .dailyExerciseFrequency == ""
                                            ) {
                                              this.ruleForm3.dailyExerciseFrequency =
                                                this.ruleForm3.motion_time1;
                                            }
                                            if (
                                              this.ruleForm3
                                                .targetExerciseFrequency == ""
                                            ) {
                                              this.ruleForm3.targetExerciseFrequency =
                                                this.ruleForm3.targetMotion_time1;
                                            }
                                            if (
                                              this.ruleForm3.targetStapleFood ==
                                              ""
                                            ) {
                                              this.ruleForm3.targetStapleFood =
                                                this.ruleForm3.targetStapleFood1;
                                            }
                                            if (
                                              this.ruleForm3.targetSmoking == ""
                                            ) {
                                              this.ruleForm3.targetSmoking =
                                                this.ruleForm3.targetSmoking1;
                                            }
                                            if (
                                              this.ruleForm2.height == "" &&
                                              this.ruleForm2.heightpl !=
                                                "请输入身高"
                                            ) {
                                              this.ruleForm2.height =
                                                this.ruleForm2.heightpl;
                                            }
                                            if (
                                              this.ruleForm2.weight == "" &&
                                              this.ruleForm2.weightpl !=
                                                "请输入体重"
                                            ) {
                                              this.ruleForm2.weight =
                                                this.ruleForm2.weightpl;
                                            }
                                            if (
                                              this.ruleForm2.other == "" &&
                                              this.ruleForm2.otherpl !=
                                                "请输入腰围"
                                            ) {
                                              this.ruleForm2.other =
                                                this.ruleForm2.otherpl;
                                            }

                                            // 准备提交的数据
                                            // let currentDate =
                                            //   this.ruleForm4.followTime;
                                            // // 获取年、月和日
                                            // let year =
                                            //   currentDate?.getFullYear();
                                            // let month = String(
                                            //   currentDate.getMonth() + 1
                                            // ).padStart(2, "0"); // 月份从0开始，需要加1
                                            // let day = String(
                                            //   currentDate.getDate()
                                            // ).padStart(2, "0");
                                            // // 组合成 YYYY-MM-DD 格式的字符串
                                            // let formattedDate = `${year}-${month}-${day}`;
                                            // this.ruleForm4.followTime =
                                            //   formattedDate;

                                            that.requestData = {
                                              ...that.ruleForm,
                                              ...that.ruleForm2,
                                              ...that.ruleForm3,
                                              ...that.ruleForm4,
                                              followType:
                                                that.ruleForm.followType.replace(
                                                  "其他",
                                                  "其他-" +
                                                    that.ruleForm
                                                      .followTypeOther
                                                ),
                                              entryer:
                                                localStorage.getItem(
                                                  "username"
                                                ),
                                              symptomHypertension: that
                                                .ruleForm2.issymptom
                                                ? that.ruleForm2.symptomHypertension
                                                    .join(",")
                                                    .replace(
                                                      "其他",
                                                      "其他-" +
                                                        that.ruleForm2
                                                          .symptomOther
                                                    )
                                                : "",
                                              bloodPressure:
                                                that.ruleForm4
                                                  .systolicPressure +
                                                "/" +
                                                that.ruleForm4
                                                  .diastolicPressure,

                                              symptomsDiabetes: that.ruleForm2
                                                .issymptomsDiabetes
                                                ? that.ruleForm2.symptomsDiabetes
                                                    .join(",")
                                                    .replace(
                                                      "其他",
                                                      "其他-" +
                                                        that.ruleForm2
                                                          .symptomsDiabetesOther
                                                    )
                                                : "",
                                              arteryPulsation:
                                                that.ruleForm2.arteryPulsation,
                                              // that.ruleForm2.arteryPulsation.join(
                                              //   ","
                                              // ),
                                              // motion: [
                                              //   that.ruleForm3.dailyExerciseFrequency,
                                              //   that.ruleForm3.dailyExerciseTime,
                                              // ].join(","),
                                              // targetMotion: [
                                              //   that.ruleForm3
                                              //     .targetExerciseTime,
                                              //   that.ruleForm3.targetExerciseFrequency,
                                              // ].join(","),
                                              medicationSituation:
                                                that.arrToStr(
                                                  that.drugValidateForm.drugs
                                                ),
                                              insulin: that.arrToStr(
                                                that.insulinValidateForm
                                                  .insulins
                                              ),
                                              referralReason: that.ruleForm4
                                                .isreferral
                                                ? that.ruleForm4.referralReason
                                                : "无",
                                              referralInstitution: that
                                                .ruleForm4.isreferral
                                                ? that.ruleForm4
                                                    .referralInstitution
                                                : "无",
                                              diseaseType: this.dTobj,
                                              followDoctor:
                                                localStorage.getItem(
                                                  "username"
                                                ),
                                              waist: that.ruleForm2.other,
                                            };

                                            // 删除一些不需要提交的字段
                                            delete that.requestData.other;
                                            delete that.requestData
                                              .followTypeOther;
                                            delete that.requestData
                                              .systolicPressure;
                                            delete that.requestData
                                              .diastolicPressure;
                                            delete that.requestData.issymptom;
                                            delete that.requestData
                                              .issymptomsDiabetes;
                                            delete that.requestData
                                              .symptomOther;
                                            delete that.requestData
                                              .symptomsDiabetesOther;
                                            delete that.requestData
                                              .targetMotion_time1;
                                            delete that.requestData
                                              .targetMotion_min1;
                                            delete that.requestData
                                              .motion_time1;
                                            delete that.requestData.motion_min1;
                                            delete that.requestData.heightShow;
                                            delete that.requestData.weightShow;
                                            delete that.requestData.otherShow;
                                            delete that.requestData.heightpl;
                                            delete that.requestData.weightpl;
                                            delete that.requestData.otherpl;
                                            delete that.requestData.heightmsg;
                                            delete that.requestData.weightmsg;
                                            delete that.requestData.othermsg;
                                            delete that.requestData.dailyDrink1;
                                            delete that.requestData
                                              .dailySmoking1;
                                            delete that.requestData
                                              .targetDrink1;
                                            delete that.requestData
                                              .targetSmoking1;
                                            delete that.requestData
                                              .targetStapleFood1;
                                            delete that.requestData.diaeaseType;
                                            delete that.requestData.stapleFood1;
                                            delete that.requestData.value;
                                            // 提交数据

                                            //判断是否能提交
                                            const data1 = {
                                              cardNumber:
                                                that.ruleForm.cardNumber,
                                              diseaseType: that.dTobj,
                                              followTime:
                                                that.ruleForm4.followTime,
                                            };
                                            const data2 = {
                                              cardNumber:
                                                that.ruleForm.cardNumber,
                                            };
                                            http
                                              .post(
                                                "/followRecord/checkBeforeAdd",
                                                data1
                                              )
                                              .then((res) => {
                                                //@ts-ignore
                                                if (res.code == 0) {
                                                  http
                                                    .post(
                                                      "/followRecord/addFollowRecord",
                                                      that.requestData
                                                    )
                                                    .then((res1) => {
                                                      ElMessage.success(
                                                        //@ts-ignore
                                                        res1.message
                                                      );
                                                      document
                                                        .getElementById(
                                                          "baseInfo"
                                                        )
                                                        .scrollIntoView();
                                                      this.ruleForm.cardNumber =
                                                        "";
                                                      this.$router.replace({
                                                        path: this.$route.path, // 保持当前路径
                                                        query: {}, // 清空查询参数
                                                      });
                                                      // 重置所有表单
                                                      that.$refs.ruleForm1.resetFields();
                                                      that.$refs.ruleForm2.resetFields();
                                                      that.$refs.ruleForm3.resetFields();
                                                      that.$refs.Form4.resetFields();
                                                      that.$refs.drugValidateForm.resetFields();
                                                      that.$refs.insulinValidateForm.resetFields();
                                                      this.formDate = {};
                                                      this.formDate1 = {};
                                                      this.dTobj1 = "";
                                                      this.ruleForm2.diaeaseType =
                                                        "";
                                                      this.ruleForm2.heightmsg =
                                                        "";
                                                      this.ruleForm2.weightmsg =
                                                        "";
                                                      this.ruleForm2.othermsg =
                                                        "";
                                                      this.ruleForm2.heightShow =
                                                        false;
                                                      this.ruleForm2.weightShow =
                                                        false;
                                                      this.ruleForm2.otherShow =
                                                        false;
                                                      this.ruleForm2.heightpl =
                                                        "请输入身高";
                                                      this.ruleForm2.weightpl =
                                                        "请输入体重";
                                                      this.ruleForm2.otherpl =
                                                        "请输入腰围";
                                                      (this.ruleForm3.stapleFood1 =
                                                        "350"),
                                                        (this.ruleForm3.dailySmoking1 =
                                                          "0"),
                                                        (this.ruleForm3.dailyDrink1 =
                                                          "0"),
                                                        (this.ruleForm3.targetMotion_time1 =
                                                          "5"),
                                                        (this.ruleForm3.targetMotion_min1 =
                                                          "30"),
                                                        (this.ruleForm3.targetStapleFood1 =
                                                          "350"),
                                                        (this.ruleForm3.targetSmoking1 =
                                                          "0"),
                                                        (this.ruleForm3.targetDrink1 =
                                                          "0"),
                                                        (this.ruleForm3.motion_time1 =
                                                          "5"),
                                                        (this.ruleForm3.motion_min1 =
                                                          " 30"),
                                                        // 重置表单
                                                        (that.showFollowTypeOther =
                                                          false);
                                                      that.showSymptomOther =
                                                        false;
                                                      this.showSymptomsDiabetesOther =
                                                        false;
                                                      this.ruleForm4.followTime =
                                                        this.formatDateToYYYYMMDD(
                                                          new Date()
                                                        );
                                                      document.querySelector(
                                                        ".containerbox"
                                                      ).scrollTop = 0;
                                                      (this.showCardNumber =
                                                        ""),
                                                        (this.showName = ""),
                                                        // location.reload();
                                                        (this.tabName = "1");
                                                      this.$emit(
                                                        "children",
                                                        "1"
                                                      );
                                                    });
                                                }
                                                //@ts-ignore
                                                if (res.code == 1) {
                                                  this.ruleForm4.followTime =
                                                    this.formatDateToYYYYMMDD(
                                                      new Date()
                                                    );
                                                  that
                                                    .$confirm(
                                                      //@ts-ignore
                                                      `${res.message}`,
                                                      "提示",
                                                      {
                                                        confirmButtonText:
                                                          "确认",
                                                        cancelButtonText:
                                                          "取消",
                                                        type: "warning",
                                                      }
                                                    )
                                                    .then(() => {
                                                      this.ruleForm.cardNumber =
                                                        "";
                                                      this.$router.replace({
                                                        path: this.$route.path, // 保持当前路径
                                                        query: {}, // 清空查询参数
                                                      });
                                                      that.$refs.ruleForm1.resetFields();
                                                      that.$refs.ruleForm2.resetFields();
                                                      that.$refs.ruleForm3.resetFields();
                                                      that.$refs.Form4.resetFields();
                                                      that.$refs.drugValidateForm.resetFields();
                                                      that.$refs.insulinValidateForm.resetFields();
                                                      this.formDate = {};
                                                      this.formDate1 = {};
                                                      this.ruleForm2.heightpl =
                                                        "请输入身高";
                                                      this.ruleForm2.weightpl =
                                                        "请输入体重";
                                                      this.ruleForm2.otherpl =
                                                        "请输入腰围";
                                                      (this.ruleForm3.stapleFood1 =
                                                        "350"),
                                                        (this.ruleForm3.dailySmoking1 =
                                                          "0"),
                                                        (this.ruleForm3.dailyDrink1 =
                                                          "0"),
                                                        (this.ruleForm3.targetMotion_time1 =
                                                          "5"),
                                                        (this.ruleForm3.targetMotion_min1 =
                                                          "30"),
                                                        (this.ruleForm3.targetStapleFood1 =
                                                          "350"),
                                                        (this.ruleForm3.targetSmoking1 =
                                                          "0"),
                                                        (this.ruleForm3.targetDrink1 =
                                                          "0"),
                                                        (this.ruleForm3.motion_time1 =
                                                          "5"),
                                                        (this.ruleForm3.motion_min1 =
                                                          "30"),
                                                        // 重置表单
                                                        (that.showFollowTypeOther =
                                                          false);
                                                      that.showSymptomOther =
                                                        false;
                                                      this.showSymptomsDiabetesOther =
                                                        false;
                                                      this.ruleForm4.followTime =
                                                        this.formatDateToYYYYMMDD(
                                                          new Date()
                                                        );
                                                      this.ruleForm4.nextFollowTime =
                                                        "";
                                                      // location.reload();
                                                      document.querySelector(
                                                        ".containerbox"
                                                      ).scrollTop = 0;
                                                      (this.showCardNumber =
                                                        ""),
                                                        (this.showName = ""),
                                                        (this.tabName = "1");
                                                      this.$emit(
                                                        "children",
                                                        "1"
                                                      );
                                                    })
                                                    .catch((err) => {
                                                      console.log(err);
                                                      return false;
                                                    });
                                                }
                                              })
                                              .catch((err) => {
                                                console.log(err);
                                                return false;
                                              });
                                          })
                                          .catch((err) => {
                                            console.log(err);
                                            return false;
                                          });
                                      } else {
                                        that.tabName = "5";
                                        this.$emit("children", "5");
                                        document
                                          .getElementById("part5")
                                          .scrollIntoView();
                                        return false;
                                      }
                                    }
                                  );
                                } else {
                                  that.tabName = "5";
                                  this.$emit("children", "5");
                                  document
                                    .getElementById("part5")
                                    .scrollIntoView();
                                  return false;
                                }
                              });
                            } else {
                              that.tabName = "4";
                              document.getElementById("zong").scrollIntoView();
                              this.$emit("children", "4");
                              return false;
                            }
                          });
                        } else {
                          document.getElementById("zong").scrollIntoView();
                          that.tabName = "4";
                          this.$emit("children", "4");
                          return false;
                        }
                      });
                    } else {
                      that.tabName = "3";
                      this.$emit("children", "3");
                      return false;
                    }
                  });
                } else {
                  that.tabName = "3";
                  this.$emit("children", "3");
                  return false;
                }
              });
            } else {
              that.tabName = "2";
              this.$emit("children", "2");
              return false;
            }
          });
        } else {
          this.tabName = "1";
          this.$emit("children", "1");
          return false;
        }
      });
    },

    arrToStr(arr) {
      if (arr.length) {
        return JSON.stringify(arr);
      } else {
        return "无";
      }
    },
    removeDrug(item) {
      const index = this.drugValidateForm.drugs.indexOf(item);
      if (index !== -1) {
        this.drugValidateForm.drugs.splice(index, 1);
      }
    },
    addDrug() {
      if (this.drugValidateForm.drugs.length < 10) {
        this.drugValidateForm.drugs.unshift({
          药品名称: "",
          用药类型: "外院",
          天: "",
          次: "",
          用量: "",
          单位: "",
          key: Date.now(),
        });
      }
    },
    removeInsulin(item) {
      const index = this.insulinValidateForm.insulins.indexOf(item);
      if (index !== -1) {
        this.insulinValidateForm.insulins.splice(index, 1);
      }
    },
    addInsulin() {
      if (this.insulinValidateForm.insulins.length < 10) {
        this.insulinValidateForm.insulins.unshift({
          药品名称: "",
          用药类型: "外院",
          用法: "皮下注射",
          // 天: "",
          // 次: "",
          用量: "",
          // 单位: "",
          key: Date.now(),
        });
      }
    },
    async fetchData() {
      try {
        // 第一个请求
        let results = [];
        const data2 = { cardNumber: this.ruleForm.cardNumber };
        // 发送请求获取数据
        const response1 = await http
          .post("/followRecord/getResidentInfoForCollect", data2)
          .then((res) => {
            if (res.data.length > 0) {
              this.formDate = {};
              this.formDate1 = {};
              res.data.forEach((v) => {
                // 更新 ruleForm2 和 ruleForm3 的相关属性

                Object.assign(this.formDate, {
                  heightpl: v.height,
                  weightpl: v.weight,
                  otherpl: v.waist,
                  dTobj1: v.diseaseType,
                });
                console.log(this.formDate);

                // this.dTobj1 = v.diseaseType;

                Object.assign(this.formDate1, {
                  dailyDrink1: v.dailyDrink,
                  dailySmoking1: v.dailySmoking,
                  stapleFood1: v.stapleFood,
                  motion_time1: v.dailyExerciseFrequency,
                  motion_min1: v.dailyExerciseTime,
                  targetMotion_time1: v.targetExerciseFrequency,
                  targetMotion_min1: v.targetExerciseTime,
                  targetStapleFood1: v.targetStapleFood,
                  targetSmoking1: v.targetSmoking,
                  targetDrink1: v.targetDrink,
                });
                console.log(this.formDate1);

                // 将结果推入 results 数组
                // results.push({
                //   value: v.cardNumber + " " + v.name, // 用于显示的值
                //   name: v.name,
                //   gender: v.gender,
                //   phoneNumber: v.phoneNumber,
                //   cardNumber: v.cardNumber,
                //   cardType: v.cardType ? v.cardType : "居民身份证",
                //   birthday: v.birthday,
                //   contactsName: v.contactsName,
                //   contactsPhoneNumber: v.contactsPhoneNumber,
                //   address: v.address,
                //   domicileAddress: v.domicileAddress,
                // });
                Object.assign(this.ruleForm, {
                  name: v.name,
                  gender: v.gender,
                  phoneNumber: v.phoneNumber,
                  cardNumber: v.cardNumber,
                  cardType: v.cardType ? v.cardType : "居民身份证",
                  birthday: v.birthday,
                  contactsName: v.contactsName,
                  contactsPhoneNumber: v.contactsPhoneNumber,
                  address: v.address,
                  domicileAddress: v.domicileAddress,
                });
              });
            }
          })
          .catch((error) => {});

        const response2 = await http
          .post("/followRecord/checkIfHaveBeenRecently", data2)
          .then((res2) => {
            //@ts-ignore
            if (res2.code == 0) {
              this.dTobj1 = this.formDate.dTobj1;

              //@ts-ignore
              Object.assign(this.ruleForm2, this.formDate);
              Object.assign(this.ruleForm3, this.formDate1);

              console.log(this.formDate, this.formDate1);
            }
            //@ts-ignore
            if (res2.code == 1) {
              //@ts-ignore
              this.$confirm(`${res2.message}`, "提示", {
                confirmButtonText: "确认",
                // cancelButtonText:
                //   "取消",
                showCancelButton: false,
                type: "warning",
              })
                .then(() => {
                  this.dTobj1 = this.formDate.dTobj1;
                  Object.assign(this.ruleForm2, this.formDate);
                  Object.assign(this.ruleForm3, this.formDate1);
                })
                .catch((err) => {
                  console.log(err);
                  return false;
                });
            }
          })
          .catch((err) => {
            console.log(err);
            return false;
          });
      } catch (error) {}
    },
  },
  created() {
    const cardNumber = crypto.Decrypt(this.$route.query.cardNumber);
    if (cardNumber) {
      this.ruleForm.cardNumber = cardNumber;
      this.fetchData();
    }
  },
};
</script>
<style scoped lang="scss">
.page {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  /* position: relative; */
}
.el-row {
  flex-wrap: nowrap;
}

:deep(.el-anchor .el-anchor__list .el-anchor__item a) {
  font-size: 16px;
  text-align: center;
  line-height: 50px;
}
:deep(.el-anchor.el-anchor--vertical .el-anchor__list) {
  padding: 0;
}
:deep(.el-anchor__link.is-active) {
  background-color: #fff;
  color: #4165d7; /* 可选：将文字颜色设为白色 */
}
.menu_box {
  position: relative;
}
.anchor {
  position: fixed;
  border: 1px solid #dfe4ed;
  height: 84%;
  width: 150px;
  background-color: #f5f7fa;
}

::v-deep .el-textarea__inner {
  /* height: 20px; */
  line-height: 15px;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}
::v-deep .el-textarea .el-textarea__inner::placeholder {
  font-size: 16px !important;
  font-family: "Microsoft YaHei";
}
.content_box::-webkit-scrollbar {
  /* overflow-y: auto; */
  display: none;
}
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
  margin-bottom: 8px;
  line-height: 22px;
  font-size: 16px;
}
:deep(.el-input__inner) {
  height: 40px;
}
:deep(.el-select__wrapper) {
  height: 40px;
}
:deep(.el-input__wrapper) {
  height: 40px;
}
:deep(.el-radio.is-bordered) {
  padding: 0px 20px 0 10px;
  border-radius: 4px;
  height: 40px;
}
.demo_r {
  display: flex;
  flex-wrap: wrap;
}
.data {
  display: flex;
}

.tabs-box::-webkit-scrollbar {
  display: none;
}
.el-form-item {
  margin-bottom: 40px !important;
}
.title {
  margin-left: 9.5vw;
  /* font-size: 16px; */
}
.zu {
  height: 32px;
  font-size: 14px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 70px;
  white-space: nowrap;
  margin-left: 1vw;
  margin-bottom: 1vw;
}
.titlee {
  margin-left: 9.5vw;
  margin-bottom: 65px;
  position: relative;
}
.shell {
  width: 100%;
  height: 2px;
  background-color: #ccc;
}
.el_titel {
  font-size: 16px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 100px;
  white-space: nowrap;
  line-height: 40px;
  /* margin-right: 110px; */
}
.form_item {
  display: flex;
}
.flex_box {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
}
.sports {
  display: flex;
  width: 100%;
}
.sports1 {
  display: flex;
  width: 100%;
}
.salt {
  // margin-left: 10vw;
  width: 250px;
}
.sports::after,
.sports::before {
  display: table;
  content: "";
}
.el_inp {
  width: 250px;
}
.el_inp1 {
  width: 56px;
}
.el_inp2 {
  width: 56px;
}
.sport1 {
  width: 115px;
}
.sport2 {
  width: 135px;
}
.el_titel1 {
  font-size: 16px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 100px;
  white-space: nowrap;
  line-height: 40px;
  /* margin-right: 110px; */
}
.el_wook1 {
  vertical-align: middle;
  height: 100%;
  width: 4.5rem;
  background-color: #f5f7fa;
  color: #909399;
  position: relative;
  border: 1px solid #dcdfe6;
  height: 40px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.el_wook2 {
  vertical-align: middle;
  height: 100%;
  width: 66px;
  background-color: #f5f7fa;
  color: #909399;
  position: relative;
  border: 1px solid #dcdfe6;
  height: 40px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.el_titel2 {
  font-size: 16px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 100px;
  height: 40px;
  white-space: nowrap;

  /* margin-right: 110px; */
}
.el_titel3 {
  font-size: 16px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 100px;
  height: 40px;
  white-space: nowrap;
  /* margin-right: 140px; */
}
.former {
  position: relative;
}
.mq {
  font-weight: 600;
  position: absolute;
  right: 0px;
  top: -66px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 250px;
  height: 40px;
}
.jy {
  font-weight: 600;
  position: absolute;
  left: 0px;
  top: -66px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 250px;
  height: 40px;
}
.main-bottom {
  height: 50px;
  padding: 10px;
  text-align: right;
}
.main-bottom .el-button {
  height: 50px;
  width: 100px;
  font-size: 20px;
}
.tip {
  font-size: 12px;
  color: red;
  z-index: 9;
}
.main-bottom {
  height: 50px;
  padding: 10px;
  text-align: right;
  position: fixed;
  bottom: 15px;
  right: 30px;
}
.main-bottom .el-button {
  height: 50px;
  width: 120px;
  font-size: 20px;
}
</style>
